Solved

Delayed enable of submit button in Firefox

Posted on 2009-05-05
11
421 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
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.
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.

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now