CODEWITHSUNDEEP
javascriptjquery
user3807187
user3807187

Reputation: 185

Disable Jquery submit button once submitted

I would like to disable the submit button once the form has been submitted. That means the submit button should not be clickable after the user click submit. That means I want the submit button to remain disable even after refresh

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

Upvotes: 1

Views: 77

Answers (2)

Merlin
Merlin

Reputation: 4927

You should do it on ajax success so in case of error the user can re submit the form. In your case it would be inside the handleEmailResponse function.

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

    /* the rest of your code */
}

Upvotes: 2

Prakash Thete
Prakash Thete

Reputation: 3892

You can disable your submit button by adding disable property to submit button.

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

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

Upvotes: 3

Related Questions