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

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>

4 个解决方案

#1

Just customize your function and add params like formid to get form data within the function to pass processForm("id of the form");

只需定制你的函数并添加类似formid的参数来获取函数中的表单数据以传递processForm(“表单的id”);

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>

#2

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>

#3

Add form_id while calling processForm(form_id) and using the id serialize 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>

jsFiddle

#4

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 action value. As follows (tested with jQuery 1.8.3):

我想加入这个,如果你在一个页面上有多个表单,你可以设置一个函数,通过获取表单的动作值来独立地对所有表单进行操作。如下(使用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!

希望这可以帮助别人!

#1