• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • Last Modified:

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

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
murryc
Asked:
murryc
  • 10
  • 5
  • 5
  • +2
2 Solutions
 
ZylochCommented:
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
 
ZvonkoSystems architectCommented:
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
 
murrycAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ZvonkoSystems architectCommented:
Check my form tag and let the Submit button as orginaly before.
0
 
ZylochCommented:
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
 
murrycAuthor Commented:
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
 
ZylochCommented:
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
 
ZylochCommented:
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
 
murrycAuthor Commented:
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
 
ZvonkoSystems architectCommented:
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
 
ZylochCommented:
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
 
ZylochCommented:
And I noticed in my example, this.value='Submit' should be this.Submit.value='Submit'
0
 
ZvonkoSystems architectCommented:
To reduce the confusion I desconnect now (and I have tested my logic and it worked...)

Good Night,
Zvonko
0
 
ZylochCommented:
~~~~~~~~~~~~~~~~~~~~
Night
~~~~~~~~~~~~~~~~~~~~
0
 
ZylochCommented:
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
 
murrycAuthor Commented:
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
 
ZylochCommented:
Ok. Try our suggestions, but instead of the xlaAFPvalidate(this), change it to true and false respectively and see what happens.
0
 
ThogekCommented:
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
 
ThogekCommented:
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
 
ZylochCommented:
Thanks for clearing that up with me Thogek (about the ASP)
0
 
hemebondCommented:
<!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
 
murrycAuthor Commented:
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
 
ZvonkoSystems architectCommented:
Sorry it didn't work. Anyway, thanks for points.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 10
  • 5
  • 5
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now