提交后禁用Jquery提交按钮

时间:2016-08-28 09:14:16

标签: javascript jquery

我想在提交表单后禁用提交按钮。这意味着用户单击提交后,提交按钮不应该是可点击的。这意味着我希望提交按钮在刷新后仍保持禁用状态

; (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);
                }
            }
        };

2 个答案:

答案 0 :(得分:3)

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

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

演示:https://jsfiddle.net/Prakash_Thete/6qqgszs4/

答案 1 :(得分:2)

您应该在ajax success上执行此操作,因此如果error,用户可以重新提交表单。 在你的情况下,它将在handleEmailResponse函数内。

function handleMailResponse(){
    $('#btnSubmitId').prop("disabled", true);

    /* the rest of your code */
}