javascript - 如何使按钮在第一次单击后停止提交表单

Question

我的问题是，我有一个带有提交按钮的表单，但是如果您执行的操作不止一次单击，它会不断添加与第一个按钮相同的信息，我该如何阻止这种情况？如何在第一次点击后禁用该按钮？

按钮代码

<小时/>

function onAddClick(id){
    $("#AccountAddModal").modal('toggle');
}
var AddForm = $("#add-form");
AddForm.submit(function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/adminpanel/webapi/accountadd',
        data: AddForm.serialize()
        }).done(function(response) {
            console.log(response);
            if (response.result) {
                AddForm.trigger("reset");
                $("#AccountAddModal").modal('toggle');
                table.ajax.reload();
            } else {$("#AccountAddModal").modal('toggle');}

        }).fail(function(data) {

    });
})

表单代码

<div class="modal fade" id="AccountAddModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <form action="#" id="add-form" class="smart-form client-form" method="post">
                    <div class="row">
                        <section class="col col-6">
                            <label class="input">
                                <input type="text" name="names" placeholder="First name">
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <input type="text" name="lastnames" placeholder="Last name">
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input"> <i class="icon-prepend fa fa-phone"></i>
                                <input type="tel" name="phone" placeholder="Phone" data-mask="(999) 999-9999">
                            </label>
                        </section>
                    </div>
                </fieldset>
            </div>
            <footer>
                <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary">
                    Register
                </button>
            </div>
            </footer>   
        </form> 
    </div>
</div><

我已经尝试过这些解决方案，但当您快速单击时，我仍然遇到问题，您可以提交多次，并且要添加新用户，您必须刷新页面

Answer 1

您可以在按钮的单击事件处理程序中执行此操作。

if ( !document.getElementById("button's_id_here").disabled )
   document.getElementById("button's_id_here").disabled = true;

    //rest of the button's click handler here

或使用 jQuery

if ( !$("#button's_id_here").attr("disabled")  )
   $("#button's_id_here").attr("disabled", true);

    //rest of the button's click handler here