Client-Side Validation and Double-Click Problem

[rmgalante]

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.

 

[darrel]

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