Solved

Disable / Re-Enable Button on the fly

Posted on 2007-04-08
8
271 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

717 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