Question

我有多个表单（类似的）使用Ajax传递以使用下面的代码附加PHP页面。但是，当我单击第一个或第二个表单时，它只发送第一个表单中的数据。我可以在所有表格上只使用一个功能，还是有更好的方法？

    $('.col_1').click(function(){   // $('#col_1').on("click", function(){
            var parent_id = $('input[name=parent_id]').val(); 
            var child_id = $('input[name=child_id]').val(); ////  
         $.ajax({
              type:"POST",
              url: "array-2.php",
              data:{parent_id: parent_id, child_id: child_id},                          
              success: function(){
        //do stuff after the AJAX calls successfully completes
             }

         }).done(function(data) {
       $('body').append(data);
         });
    });

这是我正在使用的HTML。

    <form  name="col_1" id="columnA1"  class="col_1"><div>Entrepreneur</div>
    <input name="parent_id" type="hidden" id="parent_id" value="1234" />
    <input name="child_id" type="hidden" id="child_id" value="abcd" />
    </form>

    <form  name="col_1" id="columnA2" class="col_1"><div>Musician</div>
    <input name="parent_id" type="hidden" id="parent_id" value="5678" />
    <input name="child_id" type="hidden" id="child_id" value="efgh" />
    </form>

我见过使用提交函数的类似线程但没有使用click事件。感谢

Answer 1

您需要使您的选择器具体化，您所拥有的内容过于通用，它将选择集合中的所有input[name=parent_id]和val()将返回集合中第一个项目的值。< / p>

所以改成它：

var $this = $(this),
     parent_id = $this.find('input[name=parent_id]').val(),
     child_id = $this.find('input[name=child_id]').val();

另请注意，您可能希望使用submit事件而不是click事件。你所拥有的是为表单上的click事件注册的事件，当你单击表单内的任何地方时，它将继续调用该事件（除非你真的想这样做）。

您也可以使用serializeObject。它将处理所有表单字段： -

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

你可以这样做：

   $.ajax({
          type:"POST",
          url: "array-2.php",
          data: $(this).serializeObject(),  //This will give you the map                        
          success: function(){
          ...
         }
         ...

<强> Demo

Answer 2

你应该真的使用submit方法而不是点击，每次点击整个表单时你的当前代码都会触发，它应该是这样的：

$('.col_1').on('submit', function(e){   // fire on submit
    var form = $(this);
    var parent_id = form.find('input[name=parent_id]').val(); 
    var child_id = form.find('input[name=child_id]').val();
    $.ajax({
       type:"POST",
       url: "array-2.php",
       data:{parent_id: parent_id, child_id: child_id}
    }).done(function(data) {
       $('body').append(data);
    });
    e.preventDefault();
});

Answer 3

请勿使用表单上的点击。这没有任何意义。

就这样做

<div class="col_1" data-parent_id="1234" data-child_id="abcd">Entrepeneur</div>
<div class="col_1" data-parent_id="5678" data-child_id="efgh">Musician</div>

使用

$(function() {
   $('.col_1').click(function(){  
     var parent_id = $(this).data("parent_id"); 
     var child_id = $(this).data("child_id]");  
     $.post("array-2.php",{parent_id: parent_id, child_id: child_id},
       function(data){
         //do stuff after the AJAX calls successfully completes
         $('body').append(data);
     });
  });
});

具有相同提交/单击功能的AJAX多个表单

3 个答案: