表单多次单击按钮提交多个时间

Question

I am trying to create exception by submiting form using AJAX and exception is also created when button

<button type="button" onclick="submitForm()" class="btn btn-s-md btn-primary saveButton mb-10 "><i class="fa fa-save fa-fw"></i>Save</button>

is clicked and onclick the function function submitForm() is executed.

The problem is that on multiple click of button the form is submitted as well which i don't want.

Below is my form

<form asp-action="CreateException" asp-controller="Attorney" method="post" role="form" enctype="multipart/form-data" id="attorneyExceptionForm">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3 col-lg-3 col-sm-12">
                        <div class="form-group">
                            <label asp-for="Description" class="control-label ">Description<span class="requAstrik">*</span></label>
                            <input asp-for="Description" class="form-control " />
                            <span asp-validation-for="Description" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-12">
                        <div class="form-group">
                            <label asp-for="Exception" class="control-label ">Exception<span class="requAstrik">*</span></label>
                            <select id="slctExceptionA" class="form-control select2" asp-for="Exception" style="color: #444 !important;width:100%;" asp-items="@(new SelectList(@ViewBag.ExcsList, "ExcId", "ExcDescription" ))"></select>

                            <span id="attorneyExceptionError" asp-validation-for="Exception" class="text-danger"></span>
                        </div>
                    </div>                       
                </div>                   
            </div>
        </div>           
        <div class="form-group">
            <button type="button" onclick="submitForm()" class="btn btn-s-md btn-primary saveButton mb-10 "><i class="fa fa-save fa-fw"></i>Save</button>
        </div>
    </form>

Below is my js function

<script>
function submitForm() {
    debugger;
    var datastring = $("#attorneyExceptionForm").serialize();
    var validForm = $("#attorneyExceptionForm").valid();
    if (!validForm) { return false; }
    $.ajax({
        type: "POST",
        url: "/Attorney/CreateAttorneyException",
        data: datastring,
        dataType: "json", 
        success: function (data) {
            debugger;
            if (data.success.Result) {
                debugger;
                $("#myModal5").modal('hide');
                var grid = $("#AttorneyExceptionGrid").dxDataGrid('instance');
                grid.refresh();
                showNotification("Exception saved successfully", "success");
            }
            else {
                debugger;
                showNotification(data.success.MessageBody + " is required ", "warning");
            }
        },
        error: function (data) {
            debugger;
            showNotification("Please input the required field", "warning");
        }
    });
}
</script>

Answer 1

You can disable the button in the first click and enable it again when the ajax response arrive.

<button type="button" onclick="submitForm(this)" class="btn btn-s-md btn-primary saveButton mb-10 "><i class="fa fa-save fa-fw"></i>Save</button>

function submitForm(e) {
   $(e).prop("disabled", true);
  //more code
}

And enable it again in the success or error ajax method

 $(e).prop("disabled", false);