嗨,我知道,如果页面上
只有一个表单,则无需刷新即可提交表单非常容易,但是如果页面上有多个表单怎么办。我使用以下代码进行表单提交,如果页面上只有一个表单,它可以正常工作。当页面上有多个表单时,如何更改它以使其正常工作。提前谢谢。
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>
只需自定义您的函数并添加像 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>
您拥有的内容应该适用于多个表单,但是如果使用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(没有丑陋的onsubmit属性):
<form action="" method="post">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</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>
js小提琴
只是想我补充一下,如果你在一个页面上有多个表单,你可以设置一个函数,通过获取表单的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
})
希望这对某人有所帮助!