ajaxメソッドなしで別々にフォームを送信する方法

Question

NEWFORMというタイトルのボタンがあります。クリックすると新しいフォームが作成されます。フォームには2つのボタンがあります。この2つのボタンはサブミットとして機能し、2つの異なるリクエストアクションページを持っています。私のコードは良い仕事をしています。私はフォームデータをajaxメソッド経由で送信しています。私はajaxメソッドを送信せずにコードを変更したいと思います。これを行う方法はありますか？

$(document).ready(function() { 
 
      $(".newform").click(function() { 
 
      $(".MyForm") 
 
      .eq(0) 
 
      .clone() 
 
      .show() 
 
      .insertAfter(".MyForm:last"); 
 
      }); 
 
     //click handler for add from DB 
 
      $('body').on('click', '.addfromdb', function(e) { 
 
      e.preventDefault() // To make sure the form is not submitted 
 
      var $frm = $(this).closest('.MyForm'); 
 
      console.log($frm.serialize()); 
 
      $.ajax(
 
       $(this).attr('formaction'), 
 
       { 
 
        method: $frm.attr('method'), 
 
        data: $frm.serialize() 
 
       } 
 
      ); 
 
      }); 
 
     //click handler for remove from DB 
 
     $('body').on('click', '.removefromdb', function(e) { 
 
      e.preventDefault() // To make sure the form is not submitted 
 
      var $frm = $(this).closest('.MyForm'); 
 
      console.log($frm.serialize()); 
 
      $.ajax(
 
       $(this).attr('formaction'), 
 
       { 
 
        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" formaction="first.htm"class="addfromdb">add</button> 
 
      <button type="submit" formaction="secondpage.htm" class="removefromdb">Remove</button> 
 
      </form> 
 
     </div>

Answer 1

はjavascriptのクリック機能を削除し、以下のようにHTMLからformaction属性を削除： はここに私のスニペットです。これがアクションを更新してしまう

$('body').on('click', '.removefromdb, .addfromdb', function(e) {     
    var $frm = $(this).closest('.MyForm'); 
    $frm.attr('action', $(this).attr('formaction')); 
}); 

して、フォームがブラウザを通じて提出する：あなたは、動的にフォームactionを設定するとAjaxに変更してみないいない場合

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

<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" action="default.html"> 
 
      <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" class="addfromdb">add</button> 
 
      <button type="submit"class="removefromdb">Remove</button> 
 
      </form> 
 
     </div>

Answer 2

デフォルトのプロセス