使用表格提交无刷新的jQuery / AJAX如果页面有多个表单 [英] Form submit without refresh using jquery/ajax if page have more than one form

问题描述

大家好，我知道它很容易无刷新提交表单如果只有一种形式在页面上，但怎么样，如果有不止一种形式在页面上。使用im以下code提交表单，它工作正常，如果只有一种形式在页面上。我怎样才能改变它做的时候有在页面上多种形式它的工作。先谢谢了。

 函数processForm（）{
        $阿贾克斯（{
            键入：POST，
            网址：form_process.php，
            数据：用户名='+ EN codeURIComponent（的document.getElementById（'用户名'）值），
            成功：功能（数据）{
                $（'＃消息'），HTML（数据）。
            }
        }）;
}

＆LT;形式的行动=的方法=邮报的onsubmit =processForm（）;返回false;＆GT;
＆LT;输入类型=文本名称='用户名'ID ='用户名'值=''/＆GT;
＆LT;输入类型=提交名称=提交值=提交/＆GT;
＆LT; /形式GT;
＆LT; D​​IV ID ='消息'＆GT;＆LT; / DIV＆GT;
 

解决方案

只是自定义功能，并添加PARAMS像 formid 以获得在函数中的表单数据传递 processForm（形式的ID）;

 函数processForm（formId）{
    //您的验证code
    $阿贾克斯（{
            键入：POST，
            网址：form_process.php，
            数据：$（＃+ formId）.serialize（），
            成功：功能（数据）{
                $（'＃消息'），HTML（数据）。
            }
        }）;
    }

＆LT;形式的行动=ID =Form1上的方法=邮报的onsubmit =processForm（窗口1）;返回false;＆GT;
＆LT;输入类型=文本名称='用户名'ID ='用户名'值=''/＆GT;
＆LT;输入类型=提交名称=提交值=提交/＆GT;
＆LT; /形式GT;

＆LT;形式的行动=ID =窗口2的方法=邮报的onsubmit =processForm（窗口2）;返回false;＆GT;
＆LT;输入类型=文本名称='用户名'ID ='用户名'值=''/＆GT;
＆LT;输入类型=提交名称=提交值=提交/＆GT;
＆LT; /形式GT;
＆LT;形式的行动=ID =form3方法=邮报的onsubmit =processForm（'form3'）;返回false;＆GT;
＆LT;输入类型=文本名称='用户名'ID ='用户名'值=''/＆GT;
＆LT;输入类型=提交名称=提交值=提交/＆GT;
＆LT; /形式GT;
＆LT; D​​IV ID ='消息'＆GT;＆LT; / DIV＆GT;
 

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>

解决方案

Just customize your function and add params like formid to get form data within the function to pass 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>

这篇关于使用表格提交无刷新的jQuery / AJAX如果页面有多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！