Solved

Disable / Re-Enable Button on the fly

Posted on 2007-04-08
8
262 Views
Last Modified: 2012-08-14
I have a PHP form, and when the submit button is pressed, I'd like to disable it and change it's value to "Processing... ".  I figure I need JS to do this.

The thing is, all of the form validation and processing takes place within this same page (i.e, it doesn't submit to another page).  And I can't change that for other complicated, political reasons....

Is there a way that I can disable the button & change it's value onClick, but in the event that the form returns errors, re-enable it?
0
Comment
Question by:n00b0101
  • 5
  • 2
8 Comments
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18873869
Even though the same page is called...it still makes a round trip to the server for processing before re-rendering the page.  That delay sometimes causes people to click submit more than once.

You can do something like this:

http://www.rodsdot.com/ee/disableFieldsOnButtonClick.asp

which is JavaScript.

Assuming your submit button has an ID of B1:

document.getElementById('B1').value=' Please Wait... ';
document.getElementById('B1').disabled=true;
0
 

Author Comment

by:n00b0101
ID: 18873905
Well, that disables it, but it doesn't appear to submit my form anywhere.  The rest of script doesn't process it at all.
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18874013
The page just demonstates how to disable the button onclick...

For a practical working example, you might have onsubmit="return validate(this);"

Then you would add

document.getElementById('B1').value=' Please Wait... ';
document.getElementById('B1').disabled=true;

to that.

Try again and it will submit to itself and delay a bit.
0
 
LVL 3

Expert Comment

by:viveksg
ID: 18874487
There is a way such that you can disable the submit button, so that user wont hit twice. Do like this.
<script>
function fn_DisableSubmit()
{
 document.getElementById("btnSubmit").disabled = true;
}
</script>
<body onbeforeunload="fn_DisableSubmit()">
...........
</body>
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18876432
onbeforeunload is not cross browser.  It is a proprietary MS enhancement, however some browser makes have implemented it because it is useful.  Still it would be better to set the disabled with the onclick or onsubmit events so as to not have to worry about which browsers support onbeforeunload.

FWIW
0
 

Author Comment

by:n00b0101
ID: 18974463
Still can't get this to work... The solutions aren't very clear...

In any case, I tried this:

<script type="text/javascript" language="JavaScript">
function submitted() {
    button1 = getElementsByName("processPayment")[0];
    form1 = getElementsByName("dialog")[0];
    if (button1.value == "Process Payment"){
        button1.value="Please Wait..."; form1.submit();
    }
    else {
          return false;
    }
}
</script>

And in my form:

echo "<input type=\"submit\" name=\"processPayment\" value=\"Process Payment\" onclick=\"return submitted();\">";

...

But this doesn't work.  It doesn't dim or change the text.  Any ideas?
0
 
LVL 29

Accepted Solution

by:
rdivilbiss earned 500 total points
ID: 18974955
Well, Mozilla doesn't like that code so here you go.

http://www.rodsdot.com/ee/disableFieldsOnButtonClick1.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2007 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">

<style type="text/css">
<!--
#showWait {
    display:none;
}
-->
</style>
<script type="text/javascript">
<!--
function spButtonClick() {
    document.getElementById('hideButton').style.display='none';
    document.getElementById('showWait').style.display='inline';
    document.forms[0].submit();
}
//-->
</script>

<title>disable the submit button on form submit</title>
</head>

<body>
<form method="post" action="disableFieldsOnButtonClick.asp">
  <span id="hideButton"><input type="button" value="Submit and Disable" name="B1" onclick="spButtonClick();"></span>
  <span id="showWait"><input type="button" value="Please Wait..." disabled readonly></span>
  &nbsp;<input id="R1a" type="radio" value="1" name="R1" checked>&nbsp;Yes
  <input id="R1b" type="radio" value="2" name="R1">&nbsp;No
</form>
</body>

</html>
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18976555
Thanks, Glad I could help.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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