Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1700
  • Last Modified:

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

Hi expert,

I have added this
onclick="this.disabled=true;this.value='Processing...';this.form.submit();"
to the end of my submit button in a form as in :
<input type="button" value="Submit1" onclick="this.disabled=true;this.value='Processing...';this.form.submit();">

but by adding it, the javascript I have added to be executed "onsubmit" in the form no longer gets activated, as in :
<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.'))"  action="script.cgi" method="POST" > 

How can I set it up so that both the javascript gets executed when the form does, and the button gets disabled upon clicking it?  Both work ok as-is with Netscape, but the issue here is with IE.  What can I do to make it work in both IE and Netscape?

Thanks,
Kesea
0
kesea
Asked:
kesea
  • 13
  • 11
1 Solution
 
ZylochCommented:
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}
0
 
keseaAuthor Commented:
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.
0
 
ZylochCommented:
Ah, stupid of me not to notice it right away:
type="button" should be type="submit"

Regards,
${Zyloch}
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
keseaAuthor Commented:
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.
0
 
ZylochCommented:
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}
0
 
keseaAuthor Commented:
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?
0
 
ZylochCommented:
Yes, replace your code with mine above...
0
 
keseaAuthor Commented:
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?
0
 
keseaAuthor Commented:
Note that both my original code and yours work on netscape, but neither work for IE.
0
 
ZylochCommented:
Try this:
<input type="submit" value="Submit" onclick="this.disabled=true;this.value='Processing...';return true;">

If this doesn't work (I don't really expect it to), you can have something like this where you move your onclick to your onsubmit. First, set a name to your submit button:

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

Then, <form name="JoinFreeForm" onsubmit="this.submt.disabled=true;this.submt.value='Processing...';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.'));" action="script.cgi" method="POST">

Regards,
${Zyloch}
0
 
keseaAuthor Commented:
Thanks a lot, it works :)
0
 
keseaAuthor Commented:
The second solution, that is.
0
 
keseaAuthor Commented:
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?
0
 
ZylochCommented:
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}
0
 
keseaAuthor Commented:
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.
0
 
ZylochCommented:
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}
0
 
keseaAuthor Commented:
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.
0
 
ZylochCommented:
Oops, my mistake again *beats self with stick*

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

Regards,
${Zyloch}
0
 
keseaAuthor Commented:
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.
0
 
ZylochCommented:
Can you post your complete page code so I can have a look at it now?
0
 
keseaAuthor Commented:
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>
0
 
ZylochCommented:
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.
0
 
keseaAuthor Commented:
WOOHOO!  Thanks a lot Zyloch.  Works perfect now for all situations.
0
 
ZylochCommented:
No problem, glad to help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 13
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now