How to disable button in jquery after onclick function, to avoid double form submission

Question

I am new to Jquery. I am just trying to do simple thing in Jquery. I have a page from where I want to avoid multiple submission.

function removeAddApply{
  $("#addAndApply").attr("disabled","disabled");
}

<input id="addAndApply" type="button" class="button" value="Add & Apply" onclick="removeAddApply()"/>

I want to disable button when I trigger onClick function from the page. Above is the code I am doing. Not sure what is wrong but its not working.

Complete function is

function removeConflictsOverrideReasons() {

      $("#removeConflictsReason").prop("disabled", true);
    if ($('.conflictsTable input:checkbox').is(":checked")) {
        var url = "/conflicts/conflictsRest/removeConflictsOverrideReasons";
        var selectedIssueSummaryIds = [];
         $('#conflictsDiv').find('.conflictsSelect:checked').each(function() {
             if($(this).val()) selectedIssueSummaryIds.push($(this).val());
         });

        $.post( url, { issueSummaryId: selectedIssueSummaryIds, userId: userId},
                function(data) {
                oReasonTable.fnReloadAjax();
                oTable.fnReloadAjax();
                clearConflictsChecked();
            });

    } else {
        alert('Please select Issue summary to remove');
    }
    $("#removeConflictsReason").removeAttr("disabled");

}

PSL · Accepted Answer · 2013-10-17 03:02:29Z

3

Use prop instead of attr unless you are using really old version of jquery to set the property values.

jQuery("#addAndApply").prop("disabled", true);

Read about the difference here

You can also consider binding and unbinding events, unbind \ bind or on \ off (>=1.7), and if you need it only once you can bind it using one and get rid of the inline onclick attribute from the element.

  jQuery(function(){
         jQuery('#addAndApply').on('click', function(){
            //do something  
            disableAndRemoveHandlers.call(this);   
         });
  });

  function disableAndRemoveHandlers(){
    jQuery(this).prop("disabled",true).off('click'); //Make it disable and turn off event
  }

You also have a syntax error in function declaration. It should be

function removeAddApply(){
  $("#addAndApply").attr("disabled","disabled");
}

Update

Your issue is that you are making the button too early before the ajax call is completed (ajax is async), you need to do it in the ajax call success/failure or done callbacks.

function removeConflictsOverrideReasons() {
     var $elem = $("#removeConflictsReason");
     $elem.prop("disabled", true);
    if ($('.conflictsTable input:checkbox').is(":checked")) {
        var url = "/conflicts/conflictsRest/removeConflictsOverrideReasons";
        var selectedIssueSummaryIds = [];
        $('#conflictsDiv').find('.conflictsSelect:checked').each(function () {
            if ($(this).val()) selectedIssueSummaryIds.push($(this).val());
        });

        $.post(url, {
            issueSummaryId: selectedIssueSummaryIds,
            userId: userId
        },

        function (data) {
            oReasonTable.fnReloadAjax();
            oTable.fnReloadAjax();
            clearConflictsChecked();
            $elem.prop("disabled", false); //<---------Do it here
        });

    } else {
        alert('Please select Issue summary to remove');
    }
}

edited Oct 17, 2013 at 3:02

answered Oct 17, 2013 at 1:32

PSL

124k21 gold badges257 silver badges243 bronze badges

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

7 Comments

ccot Over a year ago

if prop doesn't work, he can use this code:if (typeof $.fn.prop !== 'function') $.fn.prop = function(name, value){ if (typeof value === 'undefined') { return this.attr(name); } else { return this.attr(name, value); } };

PSL Over a year ago

@shadesco true.. If he is using really really old verison of jq.. :) But in those old version attr used to do the job of prop. They just separated them out later.

MSV Over a year ago

I tried using prop too. But didn't work. I am using Jquery 1.8 jQuery("#addAndApply").prop("disabled", true);

MSV Over a year ago

button is not disabled. I can post the data multiple times.

PSL Over a year ago

@Manu Can you replicate it in a fiddle. Do you have any errors in the console? Here is a demo jsfiddle.net/zRRMc . Check it and update it with what you are doing.

|

Collectives™ on Stack Overflow

How to disable button in jquery after onclick function, to avoid double form submission

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related