Question

我有异步加载的表单。当我通过单击提交按钮提交表单时，它会多次提交。我已经完成了一些SO答案，但问题仍然存在。

形式：

<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);                                 
        }
    });     
  }

在<div id="payform">中，我已经从loadform.php加载了表单，如下所示：

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

当我提交表单时，它会多次提交，即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

尝试data-main的更改按钮npm start：

type="submit"

从表单标记中删除type="button"和$(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); } } }); });属性，如果使用ajax，则不需要它：

action

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请求成功，您就可以启用该按钮。

单击“提交”按钮可多次提交表单数据

2 个答案: