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

【问题标题】：Form submit without refresh using jquery/ajax if page have more than one form如果页面有多个表单，则使用 jquery/ajax 提交表单而不刷新
【发布时间】：2012-08-19 12:48:37
【问题描述】：

大家好，我知道如果页面上只有一个表单，提交表单而不刷新很容易，但是如果页面上有多个表单怎么办。我使用以下代码提交表单，如果页面上只有一个表单，它可以正常工作。当页面上有多个表单时，如何更改它以使其工作。提前致谢。

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>

【问题讨论】：

它应该适用于多种形式。你能再发一些 HTML 吗？
嗨，大卫，感谢您的回答，代码只是从 db 中重复。所以基本上我从数据库中检索客户详细信息。这是示例的链接：design05.comuf.com/test-form.php

标签： php jquery ajax forms submission

【解决方案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);
            }
        } );
    }

<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>

【讨论】：

感谢大家的回答，尤其是 Dianuj，这正是我所需要的。
嗨 Dianuj 在我的页面上我有一个状态 div，它显示了客户的状态。用户可以使用下拉框选择状态。那么如何显示每个客户端的状态。我可以做 $('#status-info').html(data);但这仅适用于第一个 div，它没有任何其他效果。谢谢。
请注意，内联脚本和返回 false 都是坏主意。返回 false 会停止事件传播，这可能会破坏其他事件处理程序。

【解决方案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>

【讨论】：

【解决方案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;
}
<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 感谢您的回答，但它没有工作我猜 javascript 有问题。表单没有结束标签，我改变了它，但仍然没有工作。我试过这样：
希望你知道 serialize() 函数使用表单 id。它应该是 $("form_to_be_submitted's_id").serialize()

【解决方案4】：

只是想补充一点，如果您在一页上有多个表单，您可以通过获取表单的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
 })

希望这对某人有所帮助！

【讨论】：