CODEWITHSUNDEEP
c#asp.net
techora
techora

Reputation: 619

Disable Submit Button Only if page Validates

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.

Upvotes: 0

Views: 635

Answers (1)

Greg
Greg

Reputation: 11480

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.

Upvotes: 0

Related Questions