如何在不刷新页面的情况下自动提交此表单？
[英]How do I automatically submit this form without refreshing the page?
问题描述
This is all in a php file 
这都在一个php文件中
<!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. 所以我正在使用Jquery和Ajax，并且我需要自动提交表单。
I've tried using things like document.myform.submit, but that doesn't seem to work. 我已经尝试使用诸如document.myform.submit之类的东西，但这似乎不起作用。 It works when I am not using ajax, but that causes the page to refresh to the target of the php file. 当我不使用ajax时，它可以工作，但是这会导致页面刷新到php文件的目标。
I think I'm just missing some syntax. 我想我只是缺少一些语法。 I did a search and found a few threads like this one: Ajax auto form submit 我进行了搜索，发现了一些像这样的线程： Ajax自动表单提交
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. 双重编辑：这是一个名为process.php的示例php脚本，您需要对其进行编辑以查看自动提交是否有效。 As mentioned above, you can do this with a MySQL database. 如上所述，您可以使用MySQL数据库执行此操作。
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
4 个解决方案
解决方案1
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; 您可以使用jQuery $（'form'）。submit（）方法检查何时提交表单，然后在完成所有AJAX工作后return false;否则，您将return false; and prevent the default submission. 并阻止默认提交。
解决方案2
1 已采纳 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 问：什么是验证？，myform得到验证
A: Using the validate method, it ensures that the data in the fields are valid before the form is submitted. 答：使用validate方法，可以确保在提交表单之前，字段中的数据有效。
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. 例如，您将名称指定为“ required”，并且电子邮件必须是前面几行的“ email”。
Q: what is serialization? 问：什么是序列化？ myform gets serialized and assigned an action myform被序列化并分配一个动作
A: Serialize reads the value of all the fields in the form and constructs the query string suitable for GET and POST. 答：Serialize读取表单中所有字段的值，并构造适合GET和POST的查询字符串。 In your case, after serialization, the POST data will be name=Charlie&email=obesemuleaccount@yahoo.com" 在您的情况下，序列化后，POST数据将为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') 在这种情况下，process.php的输出将被写入＃（'＃results'）的innerHTML中
解决方案3
1 2011-08-01 11:01:16
this jquery plugin should be work http://malsup.com/jquery/form/ 这个jquery插件应该可以使用http://malsup.com/jquery/form/
Just simple 很简单
$('#myform').submit(function()
{
$('#myform').ajaxForm();
return false;
});
and your form will be submited without refreshing the page. 并且您的表单将在不刷新页面的情况下提交。
解决方案4
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: 要自动提交表单，您必须在windo.onload函数中添加以下行：
$("#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. 要测试您的页面并查看表单提交结果，我建议您首先将页面提交到一个简单的html文件（包含一些单词...），然后再获取php文件。
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) 然后根据要提交页面的html文件的名称将sumbmitHandler更改为：（在我的情况下，文本文件为target.html，仅包含单词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. 在页面加载时，您将看到并警告html页面的内容，并且div结果也将填充此内容。
I hope it helps ! 希望对您有所帮助！
Please rate. 请评价。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.