Solved

Disable / Re-Enable Button on the fly

Posted on 2007-04-08
8
267 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
converting document.write() to innerHTML 7 45
Html split(text) Part2 6 20
PHP Web Development 6 19
How do I fix this error with quotation marks? 4 24
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
This article discusses four methods for overlaying images in a container on a web page
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 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…

735 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