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

Answer 2

你可以这样简单的javascript：

{{1}}

这会禁用该按钮。只需将其添加到提交函数回调。

Answer 3

您可以使用以下jquery代码禁用该按钮：

$(#buttonid).attr("disabled","disabled");

将其放入点击功能

如何在第一次点击后停止提交表单

3 个答案: