disabling submit button after clicking once while still being able to use javascript onsubmit

Have this on the button onclick:
this.disabled=true;this.value='Processing...';return true;

And the onsubmit:
return (validateForm(this) && confirm('A password will be sent to the email addres syou provided.\n\nClick OK to proceed, or Cancel to modify your email address.'))"

It's basically the same, but just because the submit button is disabled, it doesn't mean the form doesn't get sent.

Regards,
${Zyloch}

when I try this, the javascript still doesn't get executed, and the submit button disables and says "Processing" but the form doesn't send it just gets stuck.

Ah, stupid of me not to notice it right away:
type="button" should be type="submit"

Regards,
${Zyloch}

Hmm, still doesn't work with

<input type="Submit" value="Submit1" onclick="this.disabled=true;this.value='Processing...';this.form.submit();">

ie. with IE, it submits the form ok, but doesnt execute the javascript before doing so.

Yes, because it submits the form before it gets to onSubmit.
<input type="submit" value="Submit" onclick="this.disabled=true;this.value='Processing...';">

Because it's type is submit, after the onclick, the form will automatically go to your onsubmit handler.

Regards,
${Zyloch}

when I use this

<input type="Submit" value="Submit1" onclick="this.disabled=true;this.value='Processing...';this.form.submit();">

and press submit, the button disables but the form doesn't get submitted, nor does the javascript get executed upon pressing it.

Any other things to try?

Yes, replace your code with mine above...

oops, I made a typo

when I use this, which is what you had above,

<input type="Submit" value="Submit1" onclick="this.disabled=true;this.value='Processing...';">

and press submit, the button disables but the form doesn't get submitted, nor does the javascript get executed upon pressing it.

Any other things to try?

Note that both my original code and yours work on netscape, but neither work for IE.

Thanks a lot, it works :)

The second solution, that is.

Oh oh, I spoke too soon.  It works perfect if

return(validateForm(this) && confirm('A password will be sent to the email address you provided.\n\nClick OK to proceed, or Cancel to modify your email address.'));

proves true, which for my form would be say if they didn't enter a field, left it blank, before submitting.

When the user then goes to fix it, the submit button has turned into a disabled "processing" button and he is stuck and can't submit the form after that.

I tried putting the button part at the end of the javascript part like this

<form name="JoinFreeForm" onsubmit="return(validateForm(this) && confirm('A password will be sent to the email address you provided.\n\nClick OK to proceed, or Cancel to modify your email address.'));  this.submt.disabled=true;this.submt.value='Processing...'; " action="script.cgi" method="POST">

but then the button doesnt get disabled after clicking it.

Any other things I can try?

onsubmit="this.submt.disabled=true;this.submt.value='Processing...';if(validateForm(this) && confirm('A password will be sent to the email address you provided.\n\nClick OK to proceed, or Cancel to modify your email address.')){return true;}else{this.submt.disabled=false;this.submt.value=Submit';}"

Regards,
${Zyloch}

when I use that, the javascript doesn't get executed, and the button doesn't get disabled either.

Let me know if I should just open a new question since this one is supposed to be closed.

Nah, if we haven't completely answered your question yet, you don't have to open another question. In fact, you can post to the moderators to have it reopened if you want (so others will come here to answer maybe also since they probably won't if it's closed).

onsubmit="this.submt.disabled=true;this.submt.value='Processing...';if(validateForm(this) && confirm('A password will be sent to the email address you provided.\n\nClick OK to proceed, or Cancel to modify your email address.')){return true;}else{this.submt.disabled=false;this.submt.value='Submit';}"

This should work. I forgot a single quote

Regards,
${Zyloch}

tried that, but now the javascript does come up to let you know a form field is empty, and you press oK expecting that you can go and fix it, but then it submits the form instead of staying on that page.

Oops, my mistake again *beats self with stick*

else{this.submt.disabled=false;this.submt.value='Submit';return false;}

Regards,
${Zyloch}

when I use that, neither the submit button disables, nor does the javascript pop up if a field is empty.  The form just gets submitted.

Can you post your complete page code so I can have a look at it now?

This isn't 100% complete but it includes more than what I had above and gives a clearer idea of what I'm trying to do.  I implemented all the suggestions you gave but it doesnt seem to work.  If you want the exact code, I can email it to you, just let me know, but hopefully this will be enought to see what I am doing wrong.  The handle, email, and agree field are the ones that I need javascript to check for a non-empty value before the user can submit, and disable, the form.

<head>

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

function validRequired(formField,fieldLabel)
{
      var result = true;

      if (formField.value == "")
      {
            alert('Please enter a value for the "' + fieldLabel +'" field.');
            formField.focus();
            result = false;
      }

      return result;
}
function CheckboxChecked(formField,fieldLabel)
{
      var result = true;

      if (formField.checked == 0)
      {
            alert('You must agree to the Terms and Conditions before you can join.');
            formField.focus();
            result = false;
      }

      return result;
}
function validateForm(theForm)
{
      // Customize these calls for your form

      // Start ------->
      if (!validRequired(theForm.handle,"Handle"))
            return false;

      if (!validRequired(theForm.email,"Email"))
            return false;

      if (!CheckboxChecked(theForm.agree,"Agree"))
            return false;

      // <--------- End

      return true;
}
</script>

</head>


<body>

<form name="JoinForm"
onsubmit="this.submt.disabled=true;this.submt.value='Processing...';if(valid
ateForm(this) && confirm('A password will be sent to the email address you
provided.\n\nClick OK to proceed, or Cancel to modify your email
address.')){return
true;}else{this.submt.disabled=false;this.submt.value='Submit';return
false;}" action="http://www.mysite/cgi-bin/join.cgi" method="POST">

Handle: <input type="text" name="handle"  maxlength="13" size="10">
Email: <input type="text" name="email"  maxlength="100" size="15">
Agree to Terms and Conditions: <input type="checkbox" name="agree"
value="1">

<input type="submit" value="Submit" name="submt">

</body>

I looked the code over and it seems the fix isn't actually that hard.

1) Open up your code in Notepad
2) Go to Format and make sure Word Wrap is turned OFF
3) Go to <form name="JoinForm" line and make sure all of it up to the end method="POST"> is all on one line.

WOOHOO!  Thanks a lot Zyloch.  Works perfect now for all situations.

No problem, glad to help