Disable Submit Button Only if page Validates

Question

I cannot get this to work for the life of me. I need the Submit button to disable only after all validation is complete and then for the page to post to the OnClick function.

I have a form filled with RequiredFieldValidators and a ValidationSummary. Right now it validates and the button gets disabled but the page doesn't continue to post, it just stays stuck on this state:

enter image description here

My button

<asp:Button ID="Button3" runat="server" OnClick="Submit_Form" CssClass="btn btn-primary"
                Text="Submit" OnClientClick="return disableOnSubmit(this);" />

JS to disable the button

<script type="text/javascript">
function disableOnSubmit(target) {
    if (typeof (Page_ClientValidate) == 'function') {
        if (Page_ClientValidate() == false) { return false; }
    }
        target.value = 'Please wait...';
        target.disabled = true;
        return true;
}
</script>

I am trying to prevent the user from submitting the form twice. The button should disable once they click it before it takes them to the next page.

are you stating this incorrectly..? do you mean you want the button to be disabled until all required fields have been filled / and or validated..? can you confirm..? — MethodMan
– MethodMan, Commented Oct 21, 2014 at 21:45
No, the opposite, I want the button to be active and once all my required fields are filled out and the user hits the submit button it disables it in order to prevent them from submitting the form twice. — techora
– techora, Commented Oct 21, 2014 at 21:50
you need to have something like this inside of the asp:Button markup OnClientClick="if(Page_ClientValidate(...... here is an example stackoverflow.com/questions/14490556/… — MethodMan
– MethodMan, Commented Oct 21, 2014 at 21:54
I've tried that it is still stuck on the disabled button, page doesn't post. — techora
– techora, Commented Oct 21, 2014 at 22:00

Greg · Accepted Answer · 2014-10-21 21:59:58Z

0

Well, I often utilize the Javascript Library Valid8. Saves some time for validation, otherwise what I would do would be something like this (Primitive Example):

<asp:LinkButton 
     Id="btnSubmit" runat="server"
     Text="Submit" CssClass="btn btn-Primary"
     OnClientClick="return Submit()" />

When the button is clicked it will call our function Submit.

function Submit() {
     var value = $("#txtField").Val();
     if(value != '') {
          if(!confirm("Are you sure you would like to submit?")) {
              return false;
          } else {
                return true; 
                // Be aware Link Button can have issue in Asp.Net sometimes.
          }
     }

So the validation occurs on the Client. Now you simply place this in your Page_Load:

btnSubmit.Click = new EventHandler("btnSubmit_Click");

Then place the data for the Postback in btnSubmit_Click like so:

protected void btnSubmit_Click(object sender, EventArgs e)
{
     // Do Something.
}

That is the approach I would do, mostly to avoid unwarranted Postbacks. Keep in mind my Javascript example is quite primitive, just ensures it isn't null.

Just read your hoping to avoid multiple submissions, you could do a Session Variable to avoid it or simply do:

if(Page.IsPostBack) 
{
     btnSubmit.Enabled = false;
}

Which would go on a Page_Load. Obviously any Postback though would instantly disable the button. So you might want to ensure that works in your implementation before actual implementation.

edited Oct 21, 2014 at 21:59

answered Oct 21, 2014 at 21:54

Greg

11.5k2 gold badges51 silver badges82 bronze badges

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

2 Comments

techora Over a year ago

The only problem with this is you're asking me to rewrite the validation on all 30 fields that currently use RequiredFieldValidators. I'm not ready to give up on those yet. I will surely keep your suggestion in mind as a last resort. Thank you.

Greg Over a year ago

That isn't entirely true, you can add a class that applies to all thirty fields. Then loop through for validation.

Collectives™ on Stack Overflow

Disable Submit Button Only if page Validates

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related