一旦提交，禁用Jquery提交按钮

Disable Jquery submit button once submitted

本文关键字：提交 Jquery 按钮 禁用      更新时间：2023-09-26

我想禁用提交按钮一旦表单已提交。这意味着在用户单击提交之后，提交按钮不应该被点击。这意味着我希望提交按钮即使在刷新后也保持禁用

; (function ($) {
    $.fn.tpFormDialogCustom = function (method) {
        var self = this;
        var dialogButtons = [
          {
              text: "Submit and Email",
              id: "tpFormDialog_btnSubmit",
              click: submitandmailTpFormDialog
          },

function submitandmailTpFormDialog() {
  if(CheckValidate()) {
    commonDialogs.showError(ExampleMessages.JournalError);
  } else {
    commonDialogs.showConfirm(ExampleMessages.ConfirmEmail, function() {
      try {
        commonDialogs.showProgress(ExampleMessages.SubmitAndEmail);
        var o = getOptions();
        var form = $(o.form);
        form.ajaxSubmit({
          success: handleEmailResponse,
          beforeSerialize: function($form, options) {
            if(!$("#SubmitBtn", $form).length) {
              $('select.required', $form).prop('disabled', false);
              $form.append("<input id='SubmitBtn' type='hidden' name='From' value='Submit' />");
            }
          }
        });
      } catch(e) {
        commonDialogs.showError();
      }
    });
  }
}

function handleEmailResponse(data) {
            $('#tpFormDialog_btnSubmit').prop("disabled", true);
            commonDialogs.hideProgress();
            var o = getOptions();
            if (data.IsSuccess) {
                commonDialogs.showAck(ExampleMessages.ConfirmSendEmail);
                closeTpFormDialog();
                o.table.refresh();
            } else {
                var errors = data.ResponseModel;
                if (typeof (errors) === 'string') {
                    commonDialogs.showError(errors);
                } else {
                    helpForValidation.showErrors(errors);
                }
            }
        };

您可以通过为提交按钮添加disable属性来禁用提交按钮。

$('input:submit').click(function(){
    console.log("Form is submiting.....");
    $('input:submit').attr("disabled", true);
});

Demo: https://jsfiddle.net/Prakash_Thete/6qqgszs4/

您应该在ajax success上这样做，以便在error的情况下用户可以重新提交表单。在您的情况下，它将在handleEmailResponse函数内。

function handleMailResponse(){
    $('#btnSubmitId').prop("disabled", true);
    /* the rest of your code */
}
相关文章：