针对多种形式通过AJAX发送（jQuery的） [英] Targeting multiple forms to send via ajax (jquery)

问题描述

我有我的网页多个表单。当我点击形式提交按钮，我想通过AJAX送只表的形式值。下面是我。第一种形式可以作为它应该，第二种形式实际提交表单。我怎么能单独针对每个窗体。我觉得我应该使用.find（）的地方。

 ＆LT;表格ID =Form1上的方法=邮报＆GT;
    ＆LT;输入类型=文本ID =NAME1NAME =值值=＆GT;
    ＆LT;输入类型=提交ID =update_form值=保存更改＆GT;
  ＆LT; /形式GT;

 ＆LT;形式ID =窗口2的方法=邮报＆GT;
    ＆LT;输入类型=文本ID =名2名称=值值=＆GT;
    ＆LT;输入类型=提交ID =update_form值=保存更改＆GT;
 ＆LT; /形式GT;



＆LT;脚本＆GT;
//这是提交按钮的id
$（＃update_form）。点击（函数（）{

    $阿贾克斯（{
           键入：POST，
           网址：approve_test.php
           数据：$（this.form）.serialize（）//序列化形式的内容。
           成功：函数（数据）
           {
               警报（数据）; //显示来自PHP脚本的响应。
           }
         }）;

    返回false; //避免执行实际的形式提交。
}）;
＆LT; / SCRIPT＆GT;
 

解决方案

不要使用相同的ID为多个元素。使用类。
改变你的code到这一点：

 ＆LT;表格ID =Form1上的方法=邮报＆GT;
    ＆LT;输入类型=文本ID =NAME1NAME =值值=＆GT;
    ＆LT;输入类型=提交级=update_form值=保存更改＆GT; ＆LT;！ - 改 - ＆GT;
  ＆LT; /形式GT;

 ＆LT;形式ID =窗口2的方法=邮报＆GT;
    ＆LT;输入类型=文本ID =名2名称=值值=＆GT;
    ＆LT;输入类型=提交级=update_form值=保存更改＆GT; ＆LT;！ - 改 - ＆GT;
 ＆LT; /形式GT;

＆LT;脚本＆GT;
//这是班里的提交按钮
$（update_form）。点击（函数（）{//改变
    $阿贾克斯（{
           键入：POST，
           网址：approve_test.php
           数据：$（本）.parent（）序列化（），//改变。
           成功：函数（数据）
           {
               警报（数据）; //显示来自PHP脚本的响应。
           }
         }）;
    返回false; //避免执行实际的形式提交。
}）;
＆LT; / SCRIPT＆GT;
 

I have multiple forms on my page. When I click the forms submit button, I want to send the form value of only that form through ajax. Here is what I have. The first form works as its supposed to, the second form actually submits the form. How can I target each form individually. I feel I should be using .find() somewhere.

 <form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  id="update_form"  value="Save Changes">
  </form>

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  id="update_form"  value="Save Changes">
 </form>



<script>
// this is the id of the submit button
$("#update_form").click(function() {

    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this.form).serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
</script>

解决方案

Don't use same id for multiple elements. use class.
Change your code to this:

<form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
  </form>

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
 </form>

<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this).parent().serialize(), // changed
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
    return false; // avoid to execute the actual submit of the form.
});
</script>

这篇关于针对多种形式通过AJAX发送（jQuery的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！