How do I automatically submit this form without refreshing the page?
Question
This is all in a php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JQuery Form Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--need at least one instance of jquery-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--ajax to use with jquery-->
<script type="text/javascript">
$(document).ready(function(){//when the document has loaded
$("#myform").validate({//Q: what is validate?, myform gets validated
debug: false,
rules: {
name: "required",//name and email are the only things passed
email: {
required: true,
email: true//I guess this defines the input as an email
}
},
messages: {//at what point is this message displayed?
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form) {//submit the form
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action
$('#results').html(data);//what is this?
});
}
});
});
window.onload=function( )
{
}
</script>
<style>
label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="Charlie"/>
<br>
<!-- The Email form field -->
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value="obesemuleaccount@yahoo.com"/>
<br>
<!-- The Submit button -->
<input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>
<!--ok, so I want to first try some stuff out to get a feel for how the form works-->
<!--upload the form to the site somewhere-->
<!--access and play around with it-->
<!--then figure out how to submit to multiple php forms-->
So I'm using Jquery and Ajax, and I need to submit the form automatically.
I've tried using things like document.myform.submit, but that doesn't seem to work. It works when I am not using ajax, but that causes the page to refresh to the target of the php file.
I think I'm just missing some syntax. I did a search and found a few threads like this one: Ajax auto form submit
But I'm more of a hobbyist designer, so I don't really understand what they are saying. I wouldn't put the task of fixing my code on others, but I'm pretty sure the change is minor, and I've been up a while trying to figure this out. Many thanks to anyone that helps! Please be very detailed in your directions, it'd be best in fact if you could provide the fix directly in the code itself.
edit: please don't laugh too hard at my comments, I understand the code (after much googling) much better now, that was a revision from a few hours ago.
double edit: here's a sample php script called process.php, you will need to edit it to see if the autosubmit works though. As mentioned above, you can do this with a MySQL database.
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
4 answers
solution1
1 2011-08-01 10:56:30
You could use jQuery $('form').submit() method to check when the form is submitted, and then after you do all your AJAX stuff, you return false; and prevent the default submission.
solution2
1 ACCPTED 2011-08-01 10:59:08
For minimal effort I think this will work
<script>
$(document).ready(function(){
submit_form();
});
function submit_form () {
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
</script>
Q: what is validate?, myform gets validated
A: Using the validate method, it ensures that the data in the fields are valid before the form is submitted.
Q: at what point is this message displayed?
A: When the validation does not pass. For example you specified the name to be "required" and the email must be an "email" a few lines earlier.
Q: what is serialization? myform gets serialized and assigned an action
A: Serialize reads the value of all the fields in the form and constructs the query string suitable for GET and POST. In your case, after serialization, the POST data will be name=Charlie&email=obesemuleaccount@yahoo.com"
Q: what is this?
A: "data" is passed as a parameter to the callback function. In this case, the output of process.php will be written into the innerHTML of #('#results')
solution3
1 2011-08-01 11:01:16
this jquery plugin should be work http://malsup.com/jquery/form/
Just simple
$('#myform').submit(function()
{
$('#myform').ajaxForm();
return false;
});
and your form will be submited without refreshing the page.
solution4
1 2011-08-01 13:05:39
Your script is working correctly. I tested it and it works fine. To submit your form automatically you must add this line in you windo.onload function:
$("#myform").submit();
It will submit your form automatically on page load.
To test you page and see the form submit result i suggest you to submit your page for to a simple html file first ( containing some words ... ) and then go for the php file.
And change you sumbmitHandler according to the name of the html file you are submitting page to: (in my case the text file is target.html and containt ONLY the words Hi)
submitHandler: function(form) {//submit the form
// do other stuff for a valid form
$.post('target.html', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action
alert(data);
$('#results').html(data);//what is this?
});
}
On page load you will see and alert containt the content of your html page and the div results will also be filled with this content.
I hope it helps !
Please rate.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.