prevention of multiple db entries using onClick in a form

neroe · May 5, 2005

i have a form, which when submitted writes to a database. a few times users have been clicking the submit button twice hence the data has been written back to the database twice.

i have fixed this problem by using the onlick event off the (graphical) submit button by putting a small script that disables the button after it has been clicked.

but . . .

if i hover the mouse cursor over the submit button and hit the enter key continuously i get loads of entries in the database before the form then submits.

any ideas how i can prevent this from happening?.

thanks for your help anyone.

fyi

the forms onSubmit attribute handles validation;
onSubmit="return fnValidateForm(this);"

the forms onClick attribute looks like this;
onClick="btnSubmit(this.form)"

which fires this dinky bit of code;
function btnSubmit(theform)
{
var d = document
d.theform.submit.disabled = true
}

cLFlaVA · May 5, 2005

you could try something like this (untested):

Code:

function btnSubmit(theform) {
    theform.elements['submit'].disabled = true;
    theform.onsubmit = function() { return false; }
}

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

neroe · May 5, 2005

thanks for that but it still isn't having it

cLFlaVA · May 5, 2005

this worked well for me:

Code:

<html>
<head>
<title>Blah</title>
<script type="text/javascript"><!--

function doSubmit(f) {
    if ( isValid(f) ) {
        f.submit();
        f.onsubmit = function() { return false; };
    } else {
        return false;
    }
}

function isValid(f) {
    return true;
}

//--></script>
</head>
<body>

<form name="f" target="_blank" onsubmit="return doSubmit(this);">

<input type="submit" />

</form>

</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

trollacious · May 5, 2005

If rather than disable the submit button, you could use something like (similar to cLFlaVA's code):

<script>
alreadysubmitted=false;

function checksubmit()
{
if (!alreadysubmitted)
{
alreadysubmitted = true;
return true;
}
else
{
alert('This page is being processed');
return false;
}
}
</script>

<form name="myform" action="" onsubmit="return checksubmit()">

Lee

trollacious · May 5, 2005

Cory and I were writing about the same time.

#

Lee

neroe · May 5, 2005

fantastic, thanks very much for that

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

prevention of multiple db entries using onClick in a form

neroe

Technical User

cLFlaVA

Programmer

neroe

Technical User

cLFlaVA

Programmer

trollacious

Programmer

trollacious

Programmer

neroe

Technical User

Similar threads

Part and Inventory Search

Sponsor