I want to Open my php Submit page in a Modal dialog box. I know it can be accomplished with jquery but I am still learning jquery I will like to use the function myModalFunction() to open customp1.php after visitor clicked on submit button.
I need help to write the jquery that will do the think.
Thank you in advance.
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./action/scripts/global.js" type="text/javascript"></script>
<form action="../action/subs/customp1.php/" method="post" id="ccomputer" onsubmit="myModalFunction()" >
<form action="../action/subs/submit1.php/" method="post" id="ccomputer">
<div id="orderwrap">
<input id="article" name="article" type="text" />
<input id="quantity" name="quantity" type="text" />
</div>
<input id="submit" type="submit" value="Submit Order" name="submission"/>
</form>
You need to submit your form using ajax. Your code should be like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('form#ccomputer').submit(function (e) {
e.preventDefault(); // To prevent form submit
$(this).find('input:submit').attr('disabled', true); // To prevent re-submission
var formData = $(this).serializeArray(); // data
var action = $(this).attr('action'); // action
// using POST method to send data & get response
$.post(action, {data: formData}, function (response) {
// show dialog
$('<div></div>').html(response).dialog({
title: 'Dialog title',
modal: true,
close: function () {
$(this).dialog("destroy").remove();
}
});
});
$(this).find('input:submit').removeAttr('disabled'); // re-enabling submit button
});
});
Related
I've a jsp with a form that include another jsp with a div (that's a JQuery dialog) and in the dialog I've a form that I've to validate.
My issue is: I cannot create an inner form opened in a dialog. So when I try to validate it, I get following error: Uncaught TypeError: Cannot read property 'form' of undefined.
See following snippet, please:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<form id="intForm">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</form>
</div>
</form>
</body>
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
If I remove the external form, it works fine. I can I solve this? Thanks.
Note: I can't remove the external form and I have to validate only the fields inside my dialog.
You are getting that error because when you call $("#myDialog").dialog() function of jQuery, myDialog div loses the form from it's inner html.
Please put html back after dialog and before open dialog functions
e.x.
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").html("<form id='intForm'><label for='field1'>Don\'t write anything in textbox, just click the button</label><input type='text' id='field1' required></form>");
$("#myDialog").dialog("open");
</script>
This code should run fine!
Thank you
I solved wrapping dialog inside a form, using option create:
create: function(){
formDialog = $(this).wrap($('')).parent();
}
This is the result:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</div>
</form>
</body>
<script>
var formDialog;
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
create: function(){
formDialog = $(this).wrap($('<form>')).parent();
},
buttons: {
"Click me": function(){
formDialog.valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
Thanks to all.
I have created a form in which on submitting name my url is getting redirected but i want after form action it should get redirect to my mobile validation page. after putting the code, i want it to show the offer page. I am not able to write ajax. my function is not getting called. here is what i have tried till now
http://plnkr.co/edit/3DA7YGb58BgcVcD0d10f?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form name="msform" action="another.html" method="post" id="msform">
<input name="name" type="text" placeholder="First Name" />
<input class="bl" id="submitbl" type="submit" value="Submit" />
</form>
<script type="text/javascript">
$("#submitbl").click(function(){
if($("#msform").valid() === true) {
var name = $('input[name|="name"]').val();
//use ajax to run the check
$.ajax({
type : 'POST',
url : 'mobile.html',
success: function(responseText){
resp = responseText.trim().substring(14);
if(resp == 'qualified') {
url_redirect({url: "offer.html",
method: "post",
data: { "fname": name }
});
}
}
});
}
});
</script>
</body>
</html>
For this you can do something like:
write a jQuery onsubmit function and trigger click event for submit button.
$("#msform").on('submit',function(){
$("#submitbl").trigger('click');
});
Or
submit your form through ajax and in success function redirect to mobile.html
I have spent 5 hours on this and cannot get this to work. I just want to submit a form and have it ask to confirm delete with a jquery ui popup and when it is confirmed it proceeds to the form submit and goes to delete.php.
I have stripped this down for simplicity:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#formDelete').submit(function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" name="formDelete" action="delete.php" method="POST" >
<input name="id" type="hidden" value="1">
<input name="submit" type="submit">
</form>
</body>
</html>
I click the Yes button and nothing happens. I have tried changing submit id to the same as the form but read that just loops everything.
I cannot eloquently state the reason, but I find it vague though, that if you use it like this:
<input name="submit" type="submit">
^^ input name submit
$('#formDelete').submit();
^^
I don't know the reason why but it conflicts, so never name a button "submit", instead just append a number on the name to avoid conflict.
Here try this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" action="delete.php" method="POST">
<input name="id" type="hidden" value="1" />
<input name="submit1" type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="submit1"]').on('click', function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function(e) {
$(this).dialog('close');
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});
</script>
Sidenote: Actually I kinda stumbled on this kind of question before, but I cannot find it again (actually the correct answer with explanation was there but I can't find it here on SO).
EDIT: Ahh, here it is:
Additional Notes:
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
http://api.jquery.com/submit/
I'm using jquery to avoid multiple form submission and basically disable the button on click. A bad consequence seems to be that the form is no longer submitted, thus the question: Is it possible to disable the button but still submit the form ? I know I can do the form submission through jQuery but currently all the requests are server side processed (e.g. after the form is submitted it returns a full html page either with the error or success response)
Here is the code I have so far
<script type="text/javascript">
jQuery(document).ready(function($) {
setTimeout(function(){alert("Hello")}, 3000);
$("#loginBtn").click(function() {
$("#loginBtn").attr("disabled", "disabled");
}); // click()
}); // ready()
</script>
<form id="myForm">
<div class="form-actions">
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login">
Edit
Just to make sure it's clear: The form is not submitted through AJAX
This task can be simply done by ajax function :
Try this logic:
<script>
$(document).ready(function(){
$("#loginBtn").click(function(){
$("#loginBtn").attr("disabled", "disabled");
$.post("post file path here",
{
field1:"value1", //post data that will be used by other file
field2:"value2",
.. ..
},
function(response){
if(response = "ok"){
$("#loginBtn").prop('disabled', false);
}
});
});
});
</script>
Listen to the submit event, not to the click event.
$("#form-id").on("submit", function () {
$(this).find('[type="submit"]').attr("disabled","disabled");
});
This is an example ,
<div class="form-actions" id="frm"></div>
$('#frm').bind('submit', function(e) {
$('#loginBtn').attr('disabled', 'disabled');
alert('submitted');
validForm = false;
// do stuff (validations, etc) here and return false or e.preventDefault() if you want to stop the form from submitting
if (!validForm) {
e.preventDefault();
// reactivate the button if the form was not submitted
$('#loginBtn').prop('disabled',true);
}
});
You need to return true in order to submit the form.
First write a javascript function as
function BeforeLoginSubmitted(sender) {
$(sender).prop("disabled", true);
return true;
}
Then in html button call the function as below
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"
onclick="return BeforeLoginSubmitted(this);" />
Now the form will be submitted. If you return false in any case the form will not be submitted.
Edit Below is the complete sample code for the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function BeforeLoginSubmitted(sender) {
$(sender).prop("disabled", true);
return true;
}
</script>
</head>
<body>
<form action="/" method="post" runat="server">
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"
onclick="return BeforeLoginSubmitted(this);" />
</form>
</body>
</html>
Edit 2 i see some issue with the above code in crome browser. The below code is working for the crome browser too.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function BeforeLoginSubmitted() {
$("#loginBtn").prop("disabled", true);
return true;
}
</script>
</head>
<body>
<form action="https://www.google.com" method="post" onsubmit="return BeforeLoginSubmitted(this);" >
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login" />
</form>
</body>
</html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<form >
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</form>
</body>
the $.get("invite_friends_session.php") part does not work. But it works if i keep it outside the callback function.
But i need to call the invite_friends_session.php whenever there is a click on the #submit.
how to do that?
Since the submit button is inside a form, clicking the submit button bubbles up and submits the form. You need to add a return false to the end of the handler:
$("#submit").click(function(){
$.get("invite_friends_session.php", function(){
});
return false;
});
[Edit] You should prevent the default form submit action upon click.
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault(); //edit
$.get({ url: "invite_friends_session.php",
success: function() {
alert('success');
},
error: function() {
alert('error');
},
complete: function() {
alert('complete');
}
});
});
});
Remove the <form> tags around the submit button. Since you're using jQuery's .get method, you don't need that form tag (technically, it doesn't even need to be a submit input button). Right now, it's trying to post using the form instead of getting the page via jquery.
Example: http://jsfiddle.net/R3CWp/
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
alert("i got clicked");
$.get("invite_friends_session.php", function(){
});
});
});
</script>
</head>
<body>
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</body>