Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Delayed enable of submit button in Firefox

Posted on 2009-05-05
11
Medium Priority
?
433 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
[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
  • 3
  • 3
11 Comments
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 160 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

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

Internet is a big network which is formed by connecting multiple small networks.It is a platform for all the users which are connected to it.Internet act as platform in different fields. Such as: Internet  as a collaboration platform. Internet  as…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
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.

597 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