如果页面有多个表单，则使用jquery / ajax表单提交而不刷新

大家好我知道如果页面上只有一个表单，如果页面上有多个表单，那么在没有刷新的情况下提交表单非常容易。 我使用以下代码进行表单提交，如果页面上只有一个表单，它可以正常工作。 当页面上有多个表单时，如何更改它以使其工作。 提前致谢。

function processForm() { $.ajax( { type: 'POST', url: form_process.php, data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value), success: function(data) { $('#message').html(data); } } ); } 
   
 
 

Answer 1

只需定制你的函数并添加类似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); } } ); } 
   
 
   
 
   
 
 

Answer 2

你有什么应该在多个表单上工作，但是如果使用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属性）：

Answer 3

在调用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; } 
   
 
   
 
 

的jsfiddle

Answer 4

我想加入这个，如果你在一个页面上有多个表单，你可以设置一个函数，通过获取表单的action值来独立地对所有表单进行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 }) 

希望这可以帮助别人！