形成采用无刷新提交的jQuery /阿贾克斯如果页面有超过一种形式(Form submit with

大家好我知道，它很容易提交表单，而无需刷新，如果只有一个页面上的形式，但怎么样，如果有在页面上不止一种形式。 即时通讯使用的表单提交下列代码，如果只有一个页面上的形式，它工作正常。 我怎样才能改变它做的时候有在页面上多种形式它的工作。 提前致谢。

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>

Answer 1:

只是自定义功能，并添加像PARAMS 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>

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>

Answer 3:

添加form_id同时呼吁processForm(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

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

希望这可以帮助别人了！

文章来源: Form submit without refresh using jquery/ajax if page have more than one form