Disable submit button in javascript after asp.net validationgroup success

Question

ASP.NET 4.0 Due to a network delay allowing users to hit the form submit button many times, resulting in duplicate entries, I’m trying to use Javascript to disable the button after the first click until postback. I do not know Javascript so I apologize for my cluelessness. The problem button is in a form within an updatepanel within a tabcontrol on a page with several forms, etc. so I’m using a validation group that contains different validators that turn off or on depending on a dropdown selection.

Here’s my button:

<asp:Button ID="BtnAddProd" runat="server" OnClick="BtnAddProd_Click" 
 Text="Add Status" ValidationGroup="Activity_ValControls" 
 onclientclick="disableBtnOnClick(this,'Activity_ValControls')" 
 CausesValidation="False" />

Here’s my Javascript:

function disableBtnOnClick(btnName, valGroup) {
    var isGroupValid = Page_ClientValidate(valGroup);

//check if validation group is successful
if (isGroupValid) {
    //set button to disabled so you can't click on it.       
    btnName.disabled = true;
    btnName.value = 'Please wait...'
}
    else {
        alert('Page is not valid');//for testing
    }
}

I’ve gone down many different roads and this is the closest I’ve gotten. It works in one case – only if the first click results in a validation error, then I correct the error and submit. If there are no errors, either due to my dropdown selection having no associated validators (i.e. when they want to add a free text comment record) or if I correctly enter all the validated fields the first time then it very quickly flashes to disabled with the ‘Please wait…’ text then back to enabled and default text. If I then click it many times very quickly, it eventually disables with the ‘Please wait…’ text and stays there.

Any ideas?

Try OnClientClick="this.disabled=true; return true;" encosia.com/disable-a-button-control-during-postback — Steve Greene
– Steve Greene, Commented May 5, 2015 at 20:00
Thank you for the link. It led me to add UseSubmitBehavior="False" to my button, which did the trick. — Dayna
– Dayna, Commented Jun 18, 2015 at 19:38

Peheje · Accepted Answer · 2015-05-05 21:22:54Z

0

Forgive me if I have misunderstood the question. I would just do it directly on the submit button with javascript. I had a similar problem, where I had to manipulate the site with JS before posting to the server. This snippet uses JQuery.

http://jsfiddle.net/sckyq7ta/4/

$("[type='submit']").click(function (event, args) {
if (!args) {
    event.preventDefault();

    //Do your thing
    $(this).attr("disabled", "true");
    $(this).html("Please wait..");

    //call myself with args to enable default (posting to server)
    $(this).trigger("click", {
        enableDefault: true
    });
}
});

answered May 5, 2015 at 21:22

Peheje

14.4k1 gold badge25 silver badges31 bronze badges

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

Comments

Dayna · Accepted Answer · 2015-06-18 19:40:37Z

0

Thank you for the reply. The link in the comment above led me to add UseSubmitBehavior="False" to my button and that was what I needed.

answered Jun 18, 2015 at 19:40

Dayna

13 bronze badges

Collectives™ on Stack Overflow

Disable submit button in javascript after asp.net validationgroup success

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related