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

[.jeff]

matt,

:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
: From: Warden, Matt
:
: > From: <Faust at thinkchurch.com>
: >
: > 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:
:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

agreed.

:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
: <form ... onSubmit="return (!getSubmitted());">
: ...
: <input type="submit" name="send" id="send" onClick="setSubmitted(true);">
: </form>
:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

have you verified that the onclick event handler of the input button fires
reliably before the onsubmit event handler of the form?

:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
: 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.
:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

yes, which is why an all onsubmit event handler solution would be optimal.

why not something like this?

var bSubmitted = false;

function validateForm(form)
{
  if(!bSubmitted)
    bSubmitted = true;
  else
    return false;
  return true;
}

...
<form ... onSubmit="return validateForm(this)">
...
<input type="submit" name="send" id="send">
</form>

basically you're checking the value of bSubmitted.  if it's false (meaning
the form hasn't been submitted yet) then set it to true.  otherwise we want
to return a boolean of false to halt submission of the form.  if we don't
encounter that return statement (because the form hasn't been submitted
before), then we return a value of true to complete the return statement in
the event handler and allow the form to be submitted.

the major difference between your approach and mine is i don't store the
previous value of the boolean bSubmitted and use that as the boolean value
to be returned by the return statement.  instead, i return hardcoded
booleans of true or false.  additionally, yours includes a function to set
the value of bSubmitted which isn't really necessary if all you're going to
do is change that variable's boolean value.

the advantage of using a more generic function name and using the return
statements as i have them formatted is it makes it much easier to add
additional form validation to the form simply by adding the conditional
logic to the same function.  so, if this were a login form, we could add
validation to require username and password like this:

function validateForm(form)
{
  if(!bSubmitted)
    bSubmitted = true;
  else
    return false;
  if(!form.username.value)
  {
    alert('Username is required to login.');
    form.username.focus();
    bSubmitted = false;
    return false;
  }
  if(!form.password.value)
  {
    alert('Password is required to login.');
    form.password.focus();
    bSubmitted = false;
    return false;
  }
  return true;
}

now, if they've already clicked the submit button, the variable bSubmitted
will have a value of true and execution of the validateForm() function will
be halted without even re-attempting the rest of the form field validation.
i suppose you could make it even shorter by changing the check of bSubmitted
for checking to see if it has a value of true and if so returning false and
then not setting it to true until just before the return true at the end of
the function.  the advantage of this is that you wouldn't have to explicitly
set bSubmitted back to false on the first run through if any of the field's
data didn't validate.

function validateForm(form)
{
  if(bSubmitted) return false;
  if(!form.username.value)
  {
    alert('Username is required to login.');
    form.username.focus();
    return false;
  }
  if(!form.password.value)
  {
    alert('Password is required to login.');
    form.password.focus();
    return false;
  }
  bSubmitted = true;
  return true;
}

:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
: 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.
:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

agree 100%.  if you absolutely must prevent multiple submissions, then you
must also implement a server-side solution.

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/