Solved

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

Posted on 2004-08-01
24
1,687 Views
Last Modified: 2008-02-26
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
Comment
Question by:kesea
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 11
24 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11688729
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
 

Author Comment

by:kesea
ID: 11689449
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
 
LVL 36

Expert Comment

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

Regards,
${Zyloch}
0
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 

Author Comment

by:kesea
ID: 11689937
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11690605
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
 

Author Comment

by:kesea
ID: 11690789
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11690867
Yes, replace your code with mine above...
0
 

Author Comment

by:kesea
ID: 11690955
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
 

Author Comment

by:kesea
ID: 11690961
Note that both my original code and yours work on netscape, but neither work for IE.
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 11691001
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
 

Author Comment

by:kesea
ID: 11698926
Thanks a lot, it works :)
0
 

Author Comment

by:kesea
ID: 11698928
The second solution, that is.
0
 

Author Comment

by:kesea
ID: 11699012
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11699034
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
 

Author Comment

by:kesea
ID: 11699116
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11699219
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
 

Author Comment

by:kesea
ID: 11700320
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11700656
Oops, my mistake again *beats self with stick*

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

Regards,
${Zyloch}
0
 

Author Comment

by:kesea
ID: 11749038
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11749042
Can you post your complete page code so I can have a look at it now?
0
 

Author Comment

by:kesea
ID: 11749128
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11749188
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
 

Author Comment

by:kesea
ID: 11749211
WOOHOO!  Thanks a lot Zyloch.  Works perfect now for all situations.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11749224
No problem, glad to help
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question