通过Ajax单击提交多个表单

Question

我是上single button单击。

例如假设我有两种形式。在按一下按钮，我可以看到$('form[id^=buyerForm]').length gives 2.

的first iteration选秀权first form data，让Ajax调用，但也second iterationpicks the first form data。 This is the problem.

任何人都可以请解释为什么迭代总是选择第一种形式的数据？

<script type="text/javascript"> 
    $("#jPdetails").on('click', function() { 
     $('form[id^=buyerForm]').each(function() { 
      post_form_data($(this).serialize()); 
     }); 
    }); 

     function post_form_data(data) { 
      var jsellerAddress = $("#jsellerAddress").val(); 
      var jagentId = $("#jagentId").val(); 
      var jbuilding = $("#jbuilding").val(); 
      var junitId = $('#junitId option:selected').val(); 
      var jpropertyAed = $("#jppropertyAed").val(); 
      var jparkingBaysAt = $("#jparkingBaysAt").val(); 
      var jtotalAed = $("#jtotalAed").val(); 
      var dataString = 
       'jsellerAddress=' + jsellerAddress + 
       '&jagentId=' + jagentId + 
       '&jbuilding=' + jbuilding + 
       '&junitId=' + junitId + 
       '&jpropertyAed=' + jpropertyAed + 
       '&jparkingBaysAt=' + jparkingBaysAt + 
       '&jtotalAed=' + jtotalAed; 
      $.ajax({ 
       type: 'POST', 
       url: 'jointpurchasehandller.php', 
       data: dataString, 
       success: function(result) { 
        alert(result); 
       }, 
       error: function(error) { 
        alert(error); 
       } 
      }); 
     }; 
</script> 

HTML 我的HTML结构

<div id="jointBuyer" class="JointBuyerDive" style="display:none"> 
    <div id="jBuyer"> 
     <div id="inner"class="col-lg-6"> 
      <form id="buyerForm" role="form" method="POST" enctype="multipart/form-data"> 
     </div> 
    </div> 
<div> 

和我加入multiple forms以下方式

<script 
    function addBuyer() { 
     $("#addBuyer").click(function() { 
      $("#buyerForm").clone().appendTo("#jointBuyer"); 
     }); 
    } 
</script> 

Answer 1

永远不要使用循环NEVER IDS：

$("#jPdetails").on('click', function() { 
     $('form[id^=buyerForm]').each(function(i,v) { 
      post_form_data($(v).serialize(),v); 
     }); 
    }); 

     function post_form_data(data,el) { 
      var jsellerAddress = $(el).find("#jsellerAddress").val(); 
      var jagentId = $(el).find("#jagentId").val(); 
      var jbuilding = $(el).find("#jbuilding").val(); 
      var junitId = $(el).find('#junitId option:selected').val(); 
      var jpropertyAed = $(el).find("#jppropertyAed").val(); 
      var jparkingBaysAt = $(el).find("#jparkingBaysAt").val(); 
      var jtotalAed = $(el).find("#jtotalAed").val(); 
      var dataString = 
       'jsellerAddress=' + jsellerAddress + 
       '&jagentId=' + jagentId + 
       '&jbuilding=' + jbuilding + 
       '&junitId=' + junitId + 
       '&jpropertyAed=' + jpropertyAed + 
       '&jparkingBaysAt=' + jparkingBaysAt + 
       '&jtotalAed=' + jtotalAed; 
      $.ajax({ 
       type: 'POST', 
       url: 'jointpurchasehandller.php', 
       data: dataString, 
       success: function(result) { 
        alert(result); 
       }, 
       error: function(error) { 
        alert(error); 
       } 
      }); 
     }; 

个

或改变所有的ID，以类

$("#jPdetails").on('click', function() { 
     $('.buyerForm').each(function(i,v) { 
      post_form_data($(v).serialize(),v); 
     }); 
    }); 

     function post_form_data(data,el) { 
      var jsellerAddress = $(el).find(".jsellerAddress").val(); 
      var jagentId = $(el).find(".jagentId").val(); 
      var jbuilding = $(el).find(".jbuilding").val(); 
      var junitId = $(el).find('.junitId option:selected').val(); 
      var jpropertyAed = $(el).find(".jppropertyAed").val(); 
      var jparkingBaysAt = $(el).find(".jparkingBaysAt").val(); 
      var jtotalAed = $(el).find(".jtotalAed").val(); 
      var dataString = 
       'jsellerAddress=' + jsellerAddress + 
       '&jagentId=' + jagentId + 
       '&jbuilding=' + jbuilding + 
       '&junitId=' + junitId + 
       '&jpropertyAed=' + jpropertyAed + 
       '&jparkingBaysAt=' + jparkingBaysAt + 
       '&jtotalAed=' + jtotalAed; 
      $.ajax({ 
       type: 'POST', 
       url: 'jointpurchasehandller.php', 
       data: dataString, 
       success: function(result) { 
        alert(result); 
       }, 
       error: function(error) { 
        alert(error); 
       } 
      }); 
     }; 

或：

$("#jPdetails").on('click', function() { 
    $('form[id^=buyerForm]').each(function(i,v) { 

     $.ajax({ 
      type: 'POST', 
      url: 'jointpurchasehandller.php', 
      data:$(v).serialize(), 
      success: function(result) { 
       alert(result); 
      }, 
      error: function(error) { 
       alert(error); 
      } 
     }); 

    }); 
}); 

Answer 2

我认为你可以将代码大小减少到

$("#jPdetails").on('click', function() { 
    $forms=$('form[id^=buyerForm]'); 
    $($forms).each(function(index) { 
     // this will bind corresponding data for each form 
     dataString=$($forms[index]).serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'jointpurchasehandller.php', 
      data: dataString, 
      success: function(result) { 
       alert(result); 
      }, 
      error: function(error) { 
       alert(error); 
      } 
     }); 

    }); 
});