Solved

Need submit button to disable and change to 'Please Wait...' on first click so that user does not submit more than once

Posted on 2004-09-19
23
418 Views
Last Modified: 2012-05-05
I am using many forms on my website and need them to disable and change from 'Submit Form' to 'Please Wait...' when clicked so that the user does not submit more than once.  I have already tried the other EE solutions on search and have tried solutions from dynamic drive and other javascript sites, but I cannot seem to get any of them to work.  I am using  form processor software to validate and process the form so I need to integrate everything together.  It all works right now using the form processor software, but I need to add this new solution to it.  I have very little expereince with javascipt so I need complete solutions if possible or else this question could be open forever with me asking simple questions.

Here is the code I am using now with the form, including validation and processing.

****validation**** Placed at the top of the page right under the <body>
<script language="JavaScript" src="http://www.backupguard.com/absolutefp/afpvalidation.asp?formid=9"></script>


****form processing**** Placed at the top of the form                                    
<form name="callback" method="post" action="http://www.backupguard.com/absolutefp/afp.asp?formid=9" OnSubmit="return xlaAFPvalidate(this);">


****submit button**** Placed at the end of the form.
<td width="316"><input type="submit" value="Submit Form &gt;&gt;" name="Submit"></td>
0
Comment
Question by:murryc
  • 10
  • 5
  • 5
  • +2
23 Comments
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Hi murryc,

Try putting this in your submit button onclick:

<input type="submit" value="Submit Form &gt;&gt;" name="Submit" onclick="this.disabled=true;">

Then, have this in your form onsubmit:

onsubmit="if (xlaAFPvalidate(this)) {return true;} else {this.Submit.disabled=false;return false;}"


Finally, as a note, you shouldn't really technically have an ASP page as an src for javascript, but if it works...

Regards,
Zyloch
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
All you need is this:

<form name="callback" method="post" action="/absolutefp/afp.asp?formid=9"
onSubmit="if(xlaAFPvalidate(this)){sB=this.Submit;sB.value='Please Wait...';sB.disabled=true}else return false">


0
 

Author Comment

by:murryc
Comment Utility
Zyloch, thanks for the quick response.

I tried your additions and the submit button changes to grey disbaled but the form does not submit or return any validation errors.

I am using an ASP page because the software vendor requires it and it does work with no problems.
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Check my form tag and let the Submit button as orginaly before.
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Ah, yes, my bad. I forgot the Please Wait and I do believe I put the disabled in the wrong one.

Ah well, Zvonko's is good
0
 

Author Comment

by:murryc
Comment Utility
Zvonko, thanks for your response.

I tried your form tag, and left everything else the same as I had it (is that what you meant?) and the form validates but it does not submit and the button does not change or grey out.
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Ok. A combination of both.

<input type="submit" value="Submit Form &gt;&gt;" name="Submit" onclick="this.disabled=true;this.value='Please wait...';">

onsubmit="if (xlaAFPvalidate(this)) {this.Submit.disabled=false;this.value='Submit';return true;} else {return false;}"
0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 250 total points
Comment Utility
Wait. What the hell am I thinking?

Hmm... Try this:

onsubmit="if (!xlaAFPvalidate(this)) {this.Submit.disabled=false;this.value='Submit';return false;} else {return true;}"


This would mean your form has to validate and should work. Make sure your xlaAFPvalidate function is correct.
0
 

Author Comment

by:murryc
Comment Utility
Zyloch, your combination suggestion changes the button but does not validate or submit.  The last suggestion validates and submits but the button does not disable or change.  I tried a combination of your last suggestion as well.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
Comment Utility
Sorry, I did remove the server name. You need it.

Please check this:

<form name="callback" method="post" action="http://www.backupguard.com/absolutefp/afp.asp?formid=9"
onSubmit="if(xlaAFPvalidate(this)){sB=this.Submit;sB.value='Please Wait...';sB.disabled=true}else return false">



0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Heh. How confusing eh?

Zvonko's and mine go on two slightly different concepts so it's a bit harder to connect both of them. Ah bugger.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
And I noticed in my example, this.value='Submit' should be this.Submit.value='Submit'
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
To reduce the confusion I desconnect now (and I have tested my logic and it worked...)

Good Night,
Zvonko
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
~~~~~~~~~~~~~~~~~~~~
Night
~~~~~~~~~~~~~~~~~~~~
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Oh boy, I just contributed to confusion, I meant

Sleep well, Zvonko, gotta get up and be here tomorrow :) busy day after the weekends heh
0
 

Author Comment

by:murryc
Comment Utility
I have tried all the combinations.  If no more suggestions then I will work on it some more with the suggestions and try some different variations.

If you have more suggestions Zyloch then please let me know.
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Ok. Try our suggestions, but instead of the xlaAFPvalidate(this), change it to true and false respectively and see what happens.
0
 
LVL 15

Expert Comment

by:Thogek
Comment Utility
BTW, just a note...

> Finally, as a note, you shouldn't really technically have an ASP page as an src for javascript, but if it works...

There's nothing about ASP that dictates that its output has to be HTML.  ASP can output anything you like, including JavaScript, plain-text files, CSS, or whatever.  (It helps if the ASP file doing so sets the Response.ContentType property accordingly, though.)
0
 
LVL 15

Expert Comment

by:Thogek
Comment Utility
Just for fun....

<form name="callback" method="post" action="http://www.backupguard.com/absolutefp/afp.asp?formid=9" onsubmit="var blnOK = xlaAFPvalidate(this); if(blnOK) { setTimeout('var oBtn = document.getElementById(\'Submit\'); oBtn.Value = \'Please wait...\'; oBtn.disabled = true', 10); } return blnOK;">
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
Thanks for clearing that up with me Thogek (about the ASP)
0
 
LVL 3

Expert Comment

by:hemebond
Comment Utility
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>Q_21136906</title>
      </head>
      <body>
            <form id="form" action="" method="get" onsubmit="check_form();">
                  <input type="hidden" name="test" value="failed">
                  <input id="submit" type="submit">
            </form>
      </body>
      <script type="text/javascript">
            function check_form()
            {
                  var submit = document.getElementById("submit");
                  submit.setAttribute("disabled","true");

                  if(xlaAFPvalidate(document.getElementById("form")))
                  {
                        return true;
                  }
                  else
                  {
                        submit.setAttribute("disabled","false");
                        return false;
                  }
            }
      </script>
</html>
0
 

Author Comment

by:murryc
Comment Utility
Both of you guys offered solutions that work by themselves but do not seem to work with my programming.  Even my software vendor could not offer a solution.  I am bailing out, but will split the points between you too for a job well done.  
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Sorry it didn't work. Anyway, thanks for points.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now