添付フォームを個別に送信する方法

Question

クリックすると新しいフォームを作成するにはNEWFORMというラベルの付いたボタンがあります。各フォームには送信ボタンがあります。各フォームの送信ボタンをクリックすると、そのフォームの値がAJAX経由で送信されます。私のコードは最初はうまくいきますが、新しいフォームが作成されて送信されると、すべてのフォームのすべての値が一緒に送信されます。

はここに私の抜粋です。

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

あなたが最初のonClickで正しいフォームを決定する必要があるので、それらのすべてが提出され、あなたのソリューション内のすべての「.MyForm」オブジェクトを反復処理し、そして、それを提出する：

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

あなたがこれを行うことができ、むしろ

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

問題が$(this)