CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1404577
user1404577

Reputation:

How to disable a submit button that is under a specific class

I have the following submit button on all my asp.net web application, to create or edit records:-

<input type="submit" value="Save" class="btn btn-primary"/>

But I need to write a jQuery to disable the button once the user click on it (to avoid successive API calls to an external system,). So I wrote this code, but the button will not be disabled once clicked on.

  $(".btn btn-primary").click(function () {
            $("input[type=submit]").attr("disabled", "disabled");
            $("input[type=submit]").css("background-color", "grey");
        });

Second question which approach I should follow, incase I need to re-enable the button again incase a model state error occur , after click on the submit button. can anyone advice please

Upvotes: 1

Views: 889

Answers (7)

Neil Girardi
Neil Girardi

Reputation: 4923

None of the solutions above take into account whether or not the form submission was successful. What if the user forgot to complete a required a field? She would receive an error message, attempt to correct the error and then discover that she can not resubmit the form. Even if you solve that issue, once the user refreshes the page she can submit again.

What is the purpose of the form? If for example it is a registration form, I would simply fire an Ajax method once the email address has been entered which checks for the email address in the database and prevents the user from attempting to register the same email address twice. If on the other hand you are doing a survey and you wish to discourage multiple submissions from the same user I would create a cookie. On DOM ready your script would look for the cookie. If the cookie is present do not display the form.

Upvotes: 0

Ramesh
Ramesh

Reputation: 4293

To re-enable at a later stage use

$("input[type=submit]").removeAttr("disabled");

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

try

 $(".btn.btn-primary").click(function () {
        $(this).attr("disabled", "disabled")
               .css("background-color", "grey");
        e.preventDefault();

    });

Upvotes: 0

Misters
Misters

Reputation: 1347

change this

$(".btn btn-primary").click(function () {
            $("input[type=submit]").attr("disabled", "disabled");
            $("input[type=submit]").css("background-color", "grey");
        });

for

    $(".btn .btn-primary").click(function (e) {

                $(this).attr({disabled:true});
                $("input[type=submit]").css("background-color", "grey");
            });

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Your selector is wrong

$(".btn.btn-primary").click(function () {
    $(this).prop("disabled", "disabled").css("background-color", "grey");
});

this

Upvotes: 1

FBHY
FBHY

Reputation: 1004

$(".btn.btn-primary").click(function () {
  $(this).attr('disabled','disabled');
}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try this:

$(".btn.btn-primary").click(function () {
    $("input[type=submit]").attr("disabled", "disabled");
    $("input[type=submit]").css("background-color", "grey");
    return false;
});

Upvotes: 1

Related Questions