Solved

Delayed enable of submit button in Firefox

Posted on 2009-05-05
11
422 Views
Last Modified: 2013-12-07
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

0
Comment
Question by:AirTime
  • 5
  • 3
  • 3
11 Comments
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 40 total points
ID: 24305305
Firefox and Chrome appear to want this... which also works on IE...
document.getElementById("but1").disabled = 'disabled'

Open in new window

0
 

Author Comment

by:AirTime
ID: 24338918
Changed it as you indicated.
Now, it won't work in IE or FF....
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24339220
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 8

Expert Comment

by:Bobaran98
ID: 24342132
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
 

Author Comment

by:AirTime
ID: 24357790
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
 
LVL 8

Expert Comment

by:Bobaran98
ID: 24358104
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
 

Author Comment

by:AirTime
ID: 24358355
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
 
LVL 8

Expert Comment

by:Bobaran98
ID: 24358567
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
 
LVL 8

Accepted Solution

by:
Bobaran98 earned 60 total points
ID: 24358590
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
 
LVL 8

Expert Comment

by:Bobaran98
ID: 24358603
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24422760
Thanks for the assist and the points

Good luck & have a great day.
0

Featured Post

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

803 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