Delayed enable of submit button in Firefox

I have a page with four forms with one submit button each.
I use a javascript to grey out the buttons for a certain amount of time. In IE everything works fine. When viewing the page in Chrome or FF the buttons won't go active, so I figure there's an interpretation issue of the javascript in both browsers.
<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2000); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but1").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>

Open in new window

AirTimeAsked:
Who is Participating?
 
Bobaran98Commented:
Sorry, that code came out poorly indented... and while you may not be anal retentive about that sort of thing, I certainly am. :-)  One more time, same exactly code, same exact functionality, properly indented:
<script type = "text/javascript">
    
	var tim; // global variable
    
	function disableCancel() {
		tim = setTimeout(disableContinue, 2); // 2 seconds delay
	} 
    
	function disableContinue() {
		document.getElementById("but1").disabled = false;
		document.getElementById("but2").disabled = false;
		document.getElementById("but3").disabled = false;
		document.getElementById("but4").disabled = false;
		window.clearTimeout(tim);
    }
    
    disableCancel();
    
</script>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Firefox and Chrome appear to want this... which also works on IE...
document.getElementById("but1").disabled = 'disabled'

Open in new window

0
 
AirTimeAuthor Commented:
Changed it as you indicated.
Now, it won't work in IE or FF....
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
HonorGodSoftware EngineerCommented:
That's strange.  This works in

IE 8.0.6001.18702IC
FF 3.0.10
Chrome 1.0.154.59
<html>
<script type="text/javascript">
function On() {
  var but1 = document.getElementById( 'but1' )
  but1.disabled = ''
}
 
function Off() {
  var but1 = document.getElementById( 'but1' )
  but1.disabled = 'disabled'
}
</script>
<body>
 
<input type='button' id='but1' value='Testing'><br>
<input type='radio'  name='OnOff' onclick='On()' checked>Enable<br>
<input type='radio' name='OnOff' onclick='Off()'>Disable
 
</body>
</html>

Open in new window

0
 
Bobaran98Commented:
I agree with HonorGod... I've tested your code in everything, and it works fine for me.  I've used it in:

Win - IE7
Win - FireFox
Win - Opera
Win - Chrome
Mac - FireFox
Mac - Safari
Mac - Opera

Now get this -- and don't laugh! -- I even tried it in Netscape 6, both for Win and Mac, and it worked fine!

Just so you know we're on the same page, I've posted below the entirety of the HTML/Javascript I used.  So perhaps there's something else on your page that's causing problems, perhaps a Javascript error elsewhere that you're not seeing that's halting execution?

<html>
<head>
 
</head>
<body>
 
<input type="submit" id="but1" value="Howdy!" disabled>
 
<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2000); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but1").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>
 
</body>
</html>

Open in new window

0
 
AirTimeAuthor Commented:
Well, that last version did work in IE, but still no luck in FF.
Here's my complete code for that page.

As it seems more difficult than I initially thought I'll double the points.
Thanks people!
<?php
 
session_start ();
 
include "xxdbxx/db.inc";
 
$db = mysql_connect("$host", "$dbuser", "$dbpass") or die("Fehler");
mysql_select_db("$database", $db);
 
include "inc/auth.inc";
 
$adID = 0;
 
$values = array(1,2,3,4);
$count = count($values);
 
for($i=0; $i<$count; $i++)
{
   $key[$i] = array_rand($values);
   unset($values[$key[$i]]);
}
 
function getlink($adID,$key) {
	
	$getlink = mysql_query("SELECT * FROM adlinks WHERE adID='$adID' AND linkID='$key'");
	$linkID = $key;
	$link = mysql_result($getlink,0,'link');
	$isbonus = mysql_result($getlink,0,'isbonus');
	$bonusamount = mysql_result($getlink,0,'bonusamount');
	
	if ($isbonus == 1)
	{
		echo "<input name=\"bonus\" type=\"hidden\" value=\"".$bonusamount."\">
			  	   <input name=\"adID\" type=\"hidden\" value=\"".$adID."\">
				   <input name=\"linkID\" type=\"hidden\" value=\"".$linkID."\">";
	}
	else
	{
		echo "<input name=\"adID\" type=\"hidden\" value=\"".$adID."\">
					<input name=\"linkID\" type=\"hidden\" value=\"".$linkID."\">";
	}
	
	return;
}
 
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="400" height="300" align="center" valign="middle"><form action="count.php" method="post">
    
    <?php
	
	$getstuff = getlink($adID,$key[0]);
	
	?>
    
    <input type="submit" name="but1" value="1" disabled>
 
	<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but1").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>
 
 
    </form></td>
    <td width="400" align="center" valign="middle"><form action="count.php" method="post">
    
    <?php
	
	getlink($adID,$key[1]);
	
	?>
    
    <input type="submit" name="but2" value="2" disabled=true>
 
	<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2000); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but2").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>
 
    </form></td>
  </tr>
  <tr>
    <td width="400" height="300" align="center" valign="middle"><form action="count.php" method="post">
    
    <?php
	
	getlink($adID,$key[2]);
	
	?>
    
    <input type="submit" name="but3" value="3" disabled=true>
 
	<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2000); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but3").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>
 
    </form></td>
    <td width="400" align="center" valign="middle"><form action="count.php" method="post">
    
    <?php
	
	getlink($adID,$key[3]);
	
	?>
    
    <input type="submit" name="but4" value="4" disabled=true>
 
	<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2000); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but4").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>
    
    </form></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
Bobaran98Commented:
AirTime-- I suggest starting with the simplified code I offered in my last post.  Make sure it works fine for you in all browsers (as it did for me).  Then start adding back in your other code/functionality line by line.  When the delayed enable stops working, you'll know exactly where your problem is.  You never know when something apparently unrelated will cause problems!
0
 
AirTimeAuthor Commented:
OK, found the major bug myself.

Adding an ID="but1" in the input tag does wonders....

However, now there seems to be a different problem. As can be seen from the code I have four forms and four submit buttons on that page.
The first three work just fine, only the last one won't go active most of the time. Sometimes on refreshes it does go active. Happens both in IE and FF. The FF error console doesn't give any errors.
0
 
Bobaran98Commented:
Wow, dude.  Okay, I guess I didn't really look very carefully at your code before.  You've got four different JavaScript blocks, and you're repeating your code in each one.  Frankly, I'm surprised it worked at all.  When you define multiple functions with the same name, that's bad news (and again, I'm surprised it worked at all!)
Okay, just one JavaScript block just under your <BODY> tag, as shown below... now you've got just one disableContinue() function to enabled all four buttons at once.

	<script type = "text/javascript">
    
    var tim; // global variable
    function disableCancel() {
    tim = setTimeout(disableContinue, 2); // 2 seconds delay
    } 
    
    function disableContinue() {
    document.getElementById("but1").disabled = false;
	document.getElementById("but2").disabled = false;
	document.getElementById("but3").disabled = false;
	document.getElementById("but4").disabled = false;
    window.clearTimeout(tim);
    }
    
    disableCancel();
    
    </script>

Open in new window

0
 
Bobaran98Commented:
Never mind... it's not me.  Something's going screwy with the code importer.  I give up.  Hopefully we just solved your problem, because I'm not sure I can bear to keep looking at this poor indentation.
;-)
0
 
HonorGodSoftware EngineerCommented:
Thanks for the assist and the points

Good luck & have a great day.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.