php 如果页面有多个表单，则使用 jquery/ajax 提交表单而不刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12026600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form submit without refresh using jquery/ajax if page have more than one form
提问by London Boy
Hi all I know that its very easy to submit a form without refreshing if there is only one form on the page but what about if there are more than one form on the page. Im using the following code for form submission and it works ok if there is only one form on the page. How can I change it to make it work when there are multiple forms on the page. Thanks in advance.
大家好，我知道如果页面上只有一个表单，无需刷新就可以很容易地提交表单，但是如果页面上有多个表单呢？我使用以下代码提交表单，如果页面上只有一个表单，它就可以正常工作。当页面上有多个表单时，如何更改它以使其工作。提前致谢。
function processForm() {
$.ajax( {
type: 'POST',
url: form_process.php,
data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
success: function(data) {
$('#message').html(data);
}
} );
}
<form action="" method="post" onsubmit="processForm();return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>
回答by M Khalid Junaid
Just customize your function and add params like formidto get form data within the function to pass processForm("id of the form");
只需自定义您的函数并添加参数，例如formid在函数中获取表单数据以传递processForm("id of the form");
function processForm(formId) {
//your validation code
$.ajax( {
type: 'POST',
url: form_process.php,
data: $("#"+formId).serialize(),
success: function(data) {
$('#message').html(data);
}
} );
}
<form action="" id="form1" method="post" onsubmit="processForm('form1');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<form action="" id="form2" method="post" onsubmit="processForm('form2');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<form action="" id="form3" method="post" onsubmit="processForm('form3');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>
回答by David Hellsing
What you have should work on multiple forms, however it would be better and a lot easier to debug if apply the event listener using jQuery instead:
您所拥有的应该适用于多种表单，但是如果使用 jQuery 应用事件侦听器，它会更好且更容易调试：
$('form').submit(processForm); // listen to each form's submit
function processForm(e) {
e.preventDefault(); // prevents default submit action
$.ajax( {
type: 'POST',
url: form_process.php,
data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
success: function(data) {
$('#message').html(data);
}
} );
}
HTML (without the ugly onsubmit attribute):
HTML（没有丑陋的 onsubmit 属性）：
<form action="" method="post">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
回答by Abhishek
Add form_id while calling processForm(form_id)and using the idserialize the form.
在调用processForm(form_id)和使用id序列化表单时添加 form_id 。
function processForm(form) {
$.ajax( {
type: 'POST',
url: form_process.php,
data: $(form).serialize(),
success: function(data) {
$('#message').html(data);
}
} );
return false;
}
<form action="" method="post" onsubmit="processForm(this)">
<input type="text" name="user_name" id="user_name1" value="">
<input type="submit" name="submit" value="submit" >
</form>
<form action="" method="post" onsubmit="processForm(this)">
<input type="text" name="user_name" id="user_name2" value="">
<input type="submit" name="submit" value="submit" >
</form>
<div id='message'></div>
回答by Joe H
just thought I'd add to this, if you have multiple forms on one page, you can set a function to act on all forms independently by getting the form's actionvalue. As follows (tested with jQuery 1.8.3):
只是想补充一点，如果您在一个页面上有多个表单，您可以设置一个函数，通过获取表单的action值来独立处理所有表单。如下（使用 jQuery 1.8.3 测试）：
$('form').submit(function(){
var action = $(this).attr("action")
$.ajax({
url: action,
type:'POST',
data: $(this).serialize(),
success: function(){
//alert message
}
})
return false
})
Hope this helps someone out!
希望这可以帮助别人！
