Einreichung mehrerer Formulare auf einen einzigen Klick über Ajax

Question

Ich bin auf single button klicken.

z.B. Angenommen, ich habe zwei Formen. Auf Schaltfläche klicken, kann ich $('form[id^=buyerForm]').length gives 2.

Die first iteration Picks first form data und Ajax-Aufruf machen, aber second iteration auch picks the first form data sehen. This is the problem.

Kann jemand bitte erklären, warum Iteration immer erste Formulardaten wählt?

<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 meine HTML-Struktur

<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> 

und ich bin das Hinzufügen multiple forms die folgende Art und Weise

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

Answer 1

Nie ids in Schleifen NIEMALS:

$("#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); 
       } 
      }); 
     }; 

oder alle IDs Klassen

$("#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); 
       } 
      }); 
     }; 

oder ändern:

$("#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

glaube ich Ihnen die Codegröße zu

$("#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); 
      } 
     }); 

    }); 
});