使用jquery/ajax无需刷新页面提交表单，如果页面有多个表单。

Question

大家好，我知道如果页面上只有一个表单，那么提交表单时不会刷新很容易实现。但是如果页面上有多个表单怎么办呢？我正在使用以下代码进行表单提交，如果页面上只有一个表单，它就可以正常工作。当页面上有多个表单时，我该如何修改它使其正常工作呢？谢谢。

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>

- London Boy

---

它应该适用于多个表单。你能发布更多的HTML吗？ - David Hellsing

嗨，David，感谢你的回答。代码只是从数据库中重复获取数据。所以基本上我正在从数据库中检索客户详细信息。这是示例链接：http://design05.comuf.com/test-form.php - London Boy

Answer 1

只需自定义您的函数并添加参数，如 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>

- M Khalid Junaid

---

感谢大家的回答，特别是Dianuj，这正是我所需要的。 - London Boy

嗨Dianuj，在我的页面上，我有一个状态div用于显示客户的状态。用户可以使用下拉框选择状态。那么我该如何为每个客户显示一个状态？我可以使用$('#status-info').html(data);，但这只对第一个div有效，没有其他效果。谢谢。 - London Boy

请注意，内联脚本和返回 false 都是不好的做法。返回 false 会停止事件传播，可能会破坏其他事件处理程序。 - user3714134

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属性）：

<form action="" method="post">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

- David Hellsing

Answer 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
 })

希望这能帮助到某些人！

- Joe H

Answer 4

在调用processForm(form_id)时，添加form_id并使用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

- Abhishek

---

嗨，Abhishek，感谢您的回答，但它没有起作用，我想JavaScript有问题。表单没有关闭</form>标签，我改变了它，但仍然没有起作用。我尝试像这样：<script type='text/javascript'> $(window).load(function(){ function processForm(form) { $.ajax( { type: 'POST', url: 'form_process.php', data: $(form).serialize(), success: function(data) { $('#message').html(data); } } ); return false; } });
</script> - London Boy

希望你知道 serialize() 函数使用表单 ID。应该是 $("form_to_be_submitted's_id").serialize()。 - Femi Oni