送信ボタンをクリックすると、フォームデータが複数回送信されます

Question

フォームを非同期に読み込みました。送信ボタンをクリックしてフォームを送信すると、複数回送信されます。私はSOの答えのいくつかを行ったが、それでも問題がある。

フォーム：私が提出した場合

<form method="POST" id="mulpayment"> 
    <table class="table table-bordered" style="width:80%;"> 
     <tr> 
      <th><div align="center">Name of Customer</div></th> 
      <th><div align="center">New Payment</div></th> 
      <th><div align="center">Total Debit</div></th>   
     </tr> 
    <?php 
    alldebt=0; 
    foreach($linvoice as $row): ?> 
      <input type="hidden" id="gcustomer" name="gcustomer[]" value="<?php echo $row['customerid']; ?>">    
      <?php 
      echo "<tr>"; 
       echo "<td><div align=left>".$row['name'].".</div></td>"; 
       echo '<td><input type="text" id="gpay" name="gpay[]" min="0" required style="width:100%;"></td>'; 
       echo '<td align="right"><i class="fa fa-inr"></i> '.$row['totaldebit'].'</td>';     
      echo "</tr>"; 
      $alldebt += $row['totaldebit']; 
      endforeach; 
    ?> 
     <tr> 
      <th colspan="3"><div align="right">Total</div></th> 
      <th><div align="right"><i class="fa fa-inr"></i> <?php echo number_format($alldebt,2); ?></div></th>     
     </tr> 
     <tr> 
      <td colspan="6"> 
       <div align="right"> 
        <input type="submit" id="savePayment" value="Save Payment" class="btn btn-success"> 
       </div> 
      </td> 
     </tr> 
    </table>  
    </form> 

：<div id="payform">で

<form action="" method="POST" id="aproveForm" class="smart-form" novalidate="novalidate"> 
    <fieldset>        
     <section class="col col-5" > 
      <select class="form-control" name="groupid" onchange="loadInvoice(this.value);"> 
       <option value="1">Sales</option> 
       <option value="2">Merchandiser</option> 
      </select> 
     </section>        
    </fieldset>   
</form> 

JS

function loadInvoice(id){ 
    nid= 'id='+id; 
    $.ajax({ 
     type:'POST',        
     url:'loadform.php', 
     data:nid, 
     dataType:'html', 
     success:function(data) { 
      $('#payform').html(data);         
     } 
    });  
    } 

、私は以下のようなものですloadform.phpからフォームをロードしていますそれは複数回送信されます。すなわち、paymentupdate.phpが複数回実行されます。私はpaymentupdate.phpを一度だけ実行したいと思います。この問題をどうやって解決するのですか？助けてください。

$(document).on("submit", "#mulpayment", function(e){ 
      e.preventDefault(); 
      var gcustomer = $("input[id='gcustomer']").map(function(){return $(this).val();}).get(); 
      var gpay = $("input[id='gpay']").map(function(){return $(this).val();}).get(); 
      var gbalance = $("input[id='gbalance']").map(function(){return $(this).val();}).get(); 
      var gid = $('#gid').val(); 
      var paymentMade = 'gcustomer='+gcustomer+'&gpay='+gpay+'&gbalance='+gbalance+'&gid='+gid; 
      $.ajax({ 
       type:'POST', 
       dataType:"json", 
       data:paymentMade, 
       url: 'paymentupdate.php', 
       success:function(data) { 
        if(data.success){      
         $('#mulpayment')[0].reset();  
         $('#payform').html(data.record); 
        }else{ 
         alert(data.msg);       
        }       
       } 
       }); 
      return false; 
      }); 

Answer 1

てみ変更ボタンtype="button"ためtype="submit"：

$(document).on("click", "#mulpayment", function(e){ 
      var gcustomer = $("input[id='gcustomer']").map(function(){return $(this).val();}).get(); 
      var gpay = $("input[id='gpay']").map(function(){return $(this).val();}).get(); 
      var gbalance = $("input[id='gbalance']").map(function(){return $(this).val();}).get(); 
      var gid = $('#gid').val(); 
      var paymentMade = 'gcustomer='+gcustomer+'&gpay='+gpay+'&gbalance='+gbalance+'&gid='+gid; 
      $.ajax({ 
       type:'POST', 
       dataType:"json", 
       data:paymentMade, 
       url: 'paymentupdate.php', 
       success:function(data) { 
        if(data.success){      
         $('#mulpayment')[0].reset();  
         $('#payform').html(data.record); 
        }else{ 
         alert(data.msg);       
        }       
       } 
       }); 
      }); 

とフォームタグからactionとmethod属性を削除、あなたは、AJAXを使用している場合、それを必要といけない：追加

<form id="aproveForm" class="smart-form" novalidate="novalidate"> 
<form id="mulpayment"> 

Answer 2

てみてくださいフォームを送信した後、ボタンを無効にします。このように、例えば、

$(document).on("click", "#mulpayment", function(e){ 

      e.preventDefault(); 
      $(':input[type="submit"]').prop('disabled', true); 
      var gcustomer = $("input[id='gcustomer']").map(function(){return $(this).val();}).get(); 
      var gpay = $("input[id='gpay']").map(function(){return $(this).val();}).get(); 
      var gbalance = $("input[id='gbalance']").map(function(){return $(this).val();}).get(); 
      var gid = $('#gid').val(); 
      var paymentMade = 'gcustomer='+gcustomer+'&gpay='+gpay+'&gbalance='+gbalance+'&gid='+gid; 
      $.ajax({ 
       type:'POST', 
       dataType:"json", 
       data:paymentMade, 
       url: 'paymentupdate.php', 
       success:function(data) { 
        if(data.success){      
         $('#mulpayment')[0].reset();  
         $('#payform').html(data.record); 
         $(':input[type="submit"]').prop('disabled', false); 

        }else{ 
         alert(data.msg);       
        }       
       } 
       }); 
      }); 

のように、複数回クリックすることを防ぐことができます。 ajaxリクエストが成功すると、ボタンを元に戻すことができます。