我的问题是,我有一个带有提交按钮的表单,但是如果您执行的操作不止一次单击,它会不断添加与第一个按钮相同的信息,我该如何阻止这种情况?如何在第一次点击后禁用该按钮?
按钮代码
<小时/>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><
我已经尝试过这些解决方案,但当您快速单击时,我仍然遇到问题,您可以提交多次,并且要添加新用户,您必须刷新页面
最佳答案
您可以在按钮的单击事件处理程序中执行此操作。
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
关于javascript - 如何使按钮在第一次单击后停止提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48387852/