Disabling the button after once click

user_90736 0
Viewed 181623

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.

asp.net-mvc jquery javascript
10 Answers

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.

user_2730850

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';">
user_58566060

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

user_9740450

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

user_176482560 
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. 
    }
user_29892260
Related