Eklenen formu ayrı olarak gönderme

Question

Tıklandığında yeni bir form oluşturmak için NEWFORM etiketli bir düğme vardır. Her formun bir gönderme düğmesi vardır. Her formun gönder düğmesine tıklandığında, bu formun değerleri AJAX üzerinden gönderilecektir. Kodum ilk kez iyi çalışıyor, ancak yeni bir form oluşturulduğunda ve sunulduğunda, tüm formların tüm değerleri birlikte gönderilecektir.

İşte benim snippet'tir:

$(document).ready(function() { 
 
    $(".newform").click(function() { 
 
    $(".MyForm") 
 
    .eq(0) 
 
    .clone() 
 
    .show() 
 
    .insertAfter(".MyForm:last"); 
 
    }); 
 

 
    $(document).on('click', '.MyForm button[type=submit]', function(e) { 
 
    e.preventDefault() // To make sure the form is not submitted 
 
    $('.MyForm').each(function() { 
 
    console.log($(this).serialize()) 
 
     $.ajax(
 
     $(this).attr('action'), 
 
     { 
 
      method: $(this).attr('method'), 
 
      data: $(this).serialize() 
 
     } 
 
    ) 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="newform">NEWFORM+</span> 
 
<div class="all"> 
 
    <form class="MyForm" method="post"> 
 
    <input type="text" placeholder="name" value="Aynaz" name="a1" /> 
 
    <select name="Avg"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    <button type="submit">Submit</button> 
 
    </form> 
 
</div>

Answer 1

Önce sen onClick doğru formu belirlemek gerekir, bu yüzden hepsi sunulduktan sonra, çözeltide tüm ".MyForm" nesneleri yineleme, ve gönderin:

$(document).ready(function() { 
 
    $(".newform").click(function() { 
 
    $(".MyForm") 
 
    .eq(0) 
 
    .clone() 
 
    .show() 
 
    .insertAfter(".MyForm:last"); 
 
    }); 
 

 
    $(document).on('click', '.MyForm button[type=submit]', function(e) { 
 
    e.preventDefault() // To make sure the form is not submitted 
 
    var $frm = $(this).closest('.MyForm'); 
 
    console.log($frm.serialize()); 
 
    $.ajax(
 
     $frm.attr('action'), 
 
     { 
 
      method: $frm.attr('method'), 
 
      data: $frm.serialize() 
 
     } 
 
    ); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="newform">NEWFORM+</span> 
 
<div class="all"> 
 
    <form class="MyForm" method="post"> 
 
    <input type="text" placeholder="name" value="Aynaz" name="a1" /> 
 
    <select name="Avg"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    <button type="submit">Submit</button> 
 
    </form> 
 
</div>

Answer 2

  $(document).ready(function() { 
       $(".newform").click(function() { 
       $(".MyForm") 
       .eq(0) 
       .clone() 
       .show() 
       .insertAfter(".MyForm:last"); 
       }); 

       $(document).on('click', '.MyForm button[type=submit]', function(e) { 
       e.preventDefault() // To make sure the form is not submitted 
       var $this = $(this).closest("form"); 
       console.log($this.serialize()) 
        $.ajax(
        $(this).attr('action'), 
        { 
         method: $this.attr('method'), 
         data: $this.serialize() 
        } 
       ) 
       }); 
      }); 

Answer 3

Bunu yapabilirsiniz ziyade

$(document).on('submit', '.myForm', function(e) { 
    e.preventDefault() 
    $.ajax({ 
     type: 'post', 
     data: $(this).serialize(), 
     url: 'submit.php' 
    }) 
}) 

sorun $(this)