[thelist] Seeking JS Solution for Double Form Submission????

Warden, Matt mwarden at odyssey-design.com
Mon Jul 16 15:16:39 CDT 2001


> From: <Faust at thinkchurch.com>
> Subject: [thelist] Seeking JS Solution for Double Form Submission????
>
...
> If the key already exists, the information is pulled form
> the database and displayed to the user as if it were the first
> submission.  My problem is if the database has not completely
> updated with information from various sites (Several users just
> seem to keep clicking on the form until they see something), the
> user only gets the information currently in the database.  :-(  How
> can I disable the submit buttons are the first submission?

There are a couple ways, actually. The best way is probably to bypass the
buttons altogether... go one step above that and use the onSubmit action of
the <form> element:


<html>
<head>
...
<script language="JavaScript" type="text/javascript">

    bSubmitted = false;

    function setSubmitted(value)
    {
        bSubmitted = value;
        return;
    }

    function getSubmitted()
    {
        return bSubmitted;
    }

</script>
</head>
<body>
...
<form ... onSubmit="return (!getSubmitted());">
...
<input type="submit" name="send" id="send" onClick="setSubmitted(true);">
</form>
...
</body>
</html>


The doings of it all is this line:

... onSubmit="return (!getSubmitted());"

if sSubmitted = true, then the submission button has already been clicked.
in this case, getSubmitted() will return true, so we end up with:

... onSubmit="return !true;"

And !true = false, so it's the same as saying:

... onSubmit="return false;"

Now, the problem comes when someone submits the first time by hitting
'enter' on their keyboard and then either hits enter again or clicks the
button. So, a better solution might be to take the onClick out of the submit
button and put it in the function called by onSubmit:

<script language="JavaScript" type="text/javascript">

    bSubmitted = false;

    function setSubmitted(value)
    {
        bSubmitted = value;
        return;
    }

    function getSubmitted()
    {
        var bOldValue = bSubmitted;
        setSubmitted(true);
        return bOldValue;
    }

</script>
...
<form ... onSubmit="return (!getSubmitted());">
...
<input type="submit" name="send" id="send">
</form>
...


Of course, this will only work when the browser/client has JavaScript
enabled. I think a server-side solution of sorts would be required if you
wanted to get this working for 100% of your users. The stats I've collected
from www.synchrony.net say 78% of *our* audience have JavaScript enabled
(well, more accurately, they have javascript enabled and support: new
Image(), which is what I'm using to collect this data), just to give you an
idea.


HTH,



--
mattwarden
mattwarden.com





More information about the thelist mailing list