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
443 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
[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
  • 10
  • 5
  • 5
  • +2
23 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12097376
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
ID: 12097406
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
ID: 12097436
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 63

Expert Comment

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

Expert Comment

by:Zyloch
ID: 12097474
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
ID: 12097486
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
ID: 12097501
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
ID: 12097536
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
ID: 12097600
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
ID: 12097606
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
ID: 12097619
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
 
LVL 36

Expert Comment

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

Expert Comment

by:Zvonko
ID: 12097664
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
ID: 12097679
~~~~~~~~~~~~~~~~~~~~
Night
~~~~~~~~~~~~~~~~~~~~
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12097683
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
ID: 12097702
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
ID: 12097727
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
ID: 12115905
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
ID: 12115938
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
ID: 12121296
Thanks for clearing that up with me Thogek (about the ASP)
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12177211
<!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
ID: 12259795
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
ID: 12259833
Sorry it didn't work. Anyway, thanks for points.
0

Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

696 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