Disable Jquery submit button once submitted

Question

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

I usually hide my submit buttons with display none on click and replace them with a 'thank you for contacting us' type message. — Hastig Zusammenstellen
– Hastig Zusammenstellen, Commented Aug 28, 2016 at 10:35

Prakash Thete · Accepted Answer · 2016-08-28 09:35:15Z

3

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/

edited Aug 28, 2016 at 9:35

answered Aug 28, 2016 at 9:27

Prakash Thete

3,90230 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Merlin · Accepted Answer · 2016-08-28 09:38:03Z

2

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 */
}

answered Aug 28, 2016 at 9:38

Merlin

4,9252 gold badges35 silver badges53 bronze badges

4 Comments

user3807187 Over a year ago

Hi, i added it to the handlemailresponse but it doesn't seems to work. The updated answer is at the top.

Merlin Over a year ago

$('tpFormDialog_btnSubmit').prop("disabled", true); should be $('#tpFormDialog_btnSubmit').prop("disabled", true); with a hash # if it is declared as id <button id="tpFormDialog_btnSubmit"></button>

user3807187 Over a year ago

added #. still not working. I want the submit button to remain disable after refresh.

Merlin Over a year ago

if the button is disabled after refresh how user will be able to delete an item ?? that makes no sense

Collectives™ on Stack Overflow

Disable Jquery submit button once submitted

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related