Disable / Re-Enable Button on the fly

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?
n00b0101Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rdivilbissCommented:
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
n00b0101Author Commented:
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
rdivilbissCommented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

viveksgCommented:
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
rdivilbissCommented:
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
n00b0101Author Commented:
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
rdivilbissCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rdivilbissCommented:
Thanks, Glad I could help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.