CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
batwadi
batwadi

Reputation: 1916

Disabling the button after once click

I need to disable a button once it's clicked so the user can't click it more than once. (My application is written in MVC ASP.NET, I've done this in a normal ASP.NET application.)

I tried using JavaScript and jQuery and it's not working. The button is getting disabled but the form is not being submitted.

jQuery:

$("#ClickMe").attr("disabled", "disabled");

JavaScript:

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';
}

Both methods work great, but now the form won't submit.

Upvotes: 62

Views: 221176

Answers (11)

Joe
Joe

Reputation: 871

Set disabled = true inside the function that handles a click.

document.getElementById(btn.id).disabled = true;

Upvotes: 0

Preston Badeer
Preston Badeer

Reputation: 2717

jQuery now has the .one() function that limits any given event (such as "submit") to one occurrence.

Example:

$('#myForm').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled', 'disabled');
});

This code will let you submit the form once, then disable the button. Change the selector in the find() function to whatever button you'd like to disable.

Note: Per Francisco Goldenstein, I've changed the selector to the form and the event type to submit. This allows you to submit the form from anywhere (places other than the button) while still disabling the button on submit.

Note 2: Per gorelog, using attr('disabled', 'disabled') will prevent your form from sending the value of the submit button. If you want to pass the button value, use attr('onclick', 'this.style.opacity = "0.6"; return false;') instead.

Upvotes: 76

user17648256
user17648256

Reputation:

You could just add the following to your HTML: <input type="submit" onClick="this.disabled = true;" />

Upvotes: 3

Robert Stepien
Robert Stepien

Reputation: 161

To submit form in MVC NET Core you can submit using INPUT:

<input type="submit" value="Add This Form">

To make it a button I am using Bootstrap for example:

<input type="submit" value="Add This Form" class="btn btn-primary">

To prevent sending duplicate forms in MVC NET Core, you can add onclick event, and use this.disabled = true; to disable the button:

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

If you want check first if form is valid and then disable the button, add this.form.submit(); first, so if form is valid, then this button will be disabled, otherwise button will still be enabled to allow you to correct your form when validated.

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

You can add text to the disabled button saying you are now in the process of sending form, when all validation is correct using this.value='text';:

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = 'Submitting the form';">

Upvotes: 16

Gibolt
Gibolt

Reputation: 47297

Use modern Js events, with "once"!

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

Documentation, CanIUse

Upvotes: 3

KIBOU Hassan
KIBOU Hassan

Reputation: 389

To disable a submit button, you just need to add a disabled attribute to the submit button.

$("#btnSubmit").attr("disabled", true);

To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

$('#btnSubmit').attr("disabled", false);

or

$('#btnSubmit').removeAttr("disabled");

Upvotes: 2

danial y
danial y

Reputation: 1

think simple

<button id="button1" onclick="Click();">ok</button>
<script>
    var buttonClick = false;
    function Click() {
        if (buttonClick) {
            return;
        }
        else {
            buttonClick = true;
            //todo
            alert("ok");
            //buttonClick = false;
        }
    }
</script>

if you want run once :)

Upvotes: 0

AbdelMoniem
AbdelMoniem

Reputation: 11

protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }

Upvotes: 1

Francisco Goldenstein
Francisco Goldenstein

Reputation: 13787

jQuery .one() should not be used with the click event but with the submit event as described below.

 $('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });

Upvotes: 12

Nare Vellela
Nare Vellela

Reputation: 51

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec

Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick

Upvotes: 5

Warty
Warty

Reputation: 7405

If when you set disabled="disabled" immediately after the user clicks the button, and the form doesn't submit because of that, you could try two things:

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled

Although I honestly bet there will be a better way to do this, than that.

Upvotes: 17

Related Questions