Solved

Disable / Re-Enable Button on the fly

Posted on 2007-04-08
8
265 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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)

930 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

10 Experts available now in Live!

Get 1:1 Help Now