Client-Side Validation and Double-Click Problem

Discussion in 'ASP .Net' started by rmgalante@yahoo.com, Apr 6, 2005.

  1. Guest

    I have written an ASP.Net application that uses the standard
    client-side and server-side validation for various fields on the form.
    Some of the customers that use the form report symptoms that appear to
    be the result of double-clicking the submit button on the form.

    The form has three ASP:Button tags, each of which gets translated into
    INPUT TYPE="SUBMIT" HTML elements. One submits the form's data. One
    logs the user out. And the other clears the form.

    I tried to disable the Submit button in the form's onsubmit event, but
    that event is used by the client-side validation. Also, I found that it
    was difficult to detect which button was clicked on the form. Finally,
    disabling the Submit button made the server process ignore the
    btnSubmit_Click event. This technique worked with ASP applications, but
    doesn't work with ASP.Net applications.

    I had to implement a different solution to solve these problems.

    1. First, I added attributes to each button on the form in the
    Page_Load event. I implemented a handler for the "onmousedown" event,
    not the "onclick" event. It didn't seem to work with the onclick event.


    btnSubmit.Attributes("onmoused­own") = "fIsSubmit=true;"
    btnLogout.Attributes("onmoused­own") = "fIsSubmit=false;"
    btnClear.Attributes("onmousedo­wn") = "fIsSubmit=false;"

    2. Then, I added Javascript to the HTML portion of the page as follows.
    I had to override the default client-side onsubmit event handler.
    Standard validation still works when tabbing from field to field.

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var fSubmit = false; // This flag is the debounce flag
    var fIsSubmit = false; // This flag gets set or cleared by the
    onmousedown events
    function Init()
    {
    document.Form1.txtVoucher.focu­s();
    // Override the default submit routine that ASP.Net uses.
    document.Form1.onsubmit = OnSubmit;
    }

    // This routine does client-side validation.

    function OnSubmit() {
    // Was it the submit button?
    if ( fIsSubmit )
    {
    // Added client-side validation to debounce the button, btnSubmit
    // Call the same client validation method to validate the number
    var args = new Object();
    args.Value = document.Form1.txtAmount.value­;
    args.IsValid = false;
    ValidateAmount(document.Form1, args);

    // Make sure the other form values are ok too
    if ( TrimString(document.Form1.txtV­oucher.value) != '' &&
    TrimString(document.Form1.txtH­ackLicense.value) != '' &&
    TrimString(document.Form1.txtA­mount.value) != '' &&
    args.IsValid )
    {
    // debouce the click (disabling the button doesn't work).
    if ( !fSubmit ) {
    fSubmit = true; //document.Form1.btnSubmit.dis­abled =
    true;
    return true;
    }
    }
    return false;
    }
    return true;
    }


    function TrimString(theValue)
    {
    // Trim logic removed for brevity
    }


    // This is the same function that the client-side validation uses
    // for the numeric fields in the form.

    function ValidateAmount(source, args)
    {
    var sValue = TrimString(args.Value).toStrin­g();
    sValue = sValue.replace(/[\$,]/g, '');
    if (isNaN(sValue))
    {
    args.IsValid = false;
    }
    else
    {
    var dValue = parseFloat(sValue);
    if ( dValue < 1 || dValue > 500 )
    args.IsValid = false;
    else
    args.IsValid = true;
    }
    }
    // -->
    </script>

    Not as easy as I thought it would be. The real question is, why does
    the double-click cause the form to submit twice, but only on some
    browsers.
     
    , Apr 6, 2005
    #1
    1. Advertising

  2. darrel Guest

    > I tried to disable the Submit button in the form's onsubmit event

    Not sure if this helps, but what I have done in the pass is instead of
    disabling it, just hiding it.

    So, I'd have something like this (pseudo code for the javascript):

    <div><button onclick="set this div to display:none, set the other one to
    display: block"></div>
    <div display: none>Updating database...</div>


    -Darrel
     
    darrel, Apr 6, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt
    Replies:
    14
    Views:
    4,173
    Chad Z. Hower aka Kudzu
    Jan 30, 2004
  2. =?Utf-8?B?dmlkeWE=?=
    Replies:
    1
    Views:
    771
    Kevin Spencer
    Jun 2, 2005
  3. Sydex
    Replies:
    12
    Views:
    6,601
    Victor Bazarov
    Feb 17, 2005
  4. Boss302
    Replies:
    0
    Views:
    1,084
    Boss302
    Nov 21, 2006
  5. Bogdan
    Replies:
    2
    Views:
    678
    Bogdan
    Jun 9, 2008
Loading...

Share This Page