making a countdown that disables checkboxes

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 2164 Views - Last Post: 24 October 2010 - 04:25 AM

#1 TheMaster1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-October 10

making a countdown that disables checkboxes

Posted 07 October 2010 - 02:12 PM

Hello programmers, I'm new to programming and I was wondering if someone could show me how to make a timer, so that when a checkbox has been submitted, that checkbox will be disabled until the timer has reached 0, when the timer reaches 0 I would like the timer to enable the checkbox again.

Hope I have explained enough so someone could possibly show me a way of doing this.

Thanks
TheMaster1

Is This A Good Question/Topic? 0
  • +

Replies To: making a countdown that disables checkboxes

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2911
  • View blog
  • Posts: 10,085
  • Joined: 08-August 08

Re: making a countdown that disables checkboxes

Posted 08 October 2010 - 07:06 AM

We're not here to write code for you. Show us what you have tried.
Was This Post Helpful? 0
  • +
  • -

#3 TheMaster1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-October 10

Re: making a countdown that disables checkboxes

Posted 10 October 2010 - 03:22 AM

This is what i have tried so far:

<?php
require ("left.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.align_center {
	text-align: center;
}
.align_left {
	text-align: left;
}

.table_border {
	border: 1px solid #FFFFFF;
	background-color: #666666;
}
</style>
<script type="text/javascript">
function disable()
{
	document.getElementById('ch1').disabled = true;
  	setTimeout ( "enable()", 7000 );
    document.getElementById("number").innerHTML = "Wait 7 seconds";

}

function enable()
{
	document.getElementById('ch1').disabled = false;
	document.getElementById("number").innerHTML = "Avalible";
}
</script>


</head>

<body style="color: #FFFFFF; background-color: #333333">
<div style="width: 1288px" class="contain">
<br />
<form>
<table align="center" style="width: 27%; height: 122" class="table_border">
		<tr>
		<td style="width: 32px"><input id="ch1" name="checkbox1" type="checkbox"/></td>
		<td style="width: 231px" class="align_left">Rob someone of the street.</td>
		<td class="align"><div id="number">	</div></td>
	</tr>
	<tr>
		<td class="align" colspan="3">
		<input name="commit" type="button" value="Commit" onclick="disable(form.checkbox1.value)"/></td>
	</tr>
	</table>
</form>
<br />
</div>
</body>

</html>
<?php
require ("right.php");


?>


With this code it will disable the checkbox for 7 seconds, but how do i show the countdown from 7 (7,6,5,4,3,2,1,0) cause mine just says wait 7 seconds, when i would like it to countdown from 7 to 0 how would i do that?
Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2911
  • View blog
  • Posts: 10,085
  • Joined: 08-August 08

Re: making a countdown that disables checkboxes

Posted 10 October 2010 - 07:12 AM

One way to do it:
<script type="text/javascript">
var my_delay = 7000;
function disable()
{
	document.getElementById('ch1').disabled = true;
	while(my_delay > 0)
	{
    	document.getElementById("number").innerHTML = "Wait 7 seconds";
  		setTimeout ( "enable()", my_delay );
		my_delay -= 1000;
	}
  	setTimeout ( "enable()", my_delay );
	my_delay = 7000;
}

function enable()
{
	document.getElementById('ch1').disabled = false;
	if(my_delay > 0)
	{
		document.getElementById("number").innerHTML = "Wait "+(my_delay/1000)+ "seconds";
	} else {
		document.getElementById("number").innerHTML = "Avalible";	
	}
}
</script>


Untested, but it should be close.

This post has been edited by CTphpnwb: 10 October 2010 - 07:17 AM

Was This Post Helpful? 0
  • +
  • -

#5 TheMaster1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-October 10

Re: making a countdown that disables checkboxes

Posted 10 October 2010 - 08:18 AM

No that doesn't work, im not sure that anything was wrong with the countdown part of the javascript before, I just wanted to show in text the countdown happening live.
Was This Post Helpful? 0
  • +
  • -

#6 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: making a countdown that disables checkboxes

Posted 10 October 2010 - 08:36 AM

A much simpler approach.
function call(count)
{
    document.getElementById("number").innerHTML = "Wait "+count+" seconds";
    count--;
    if(count>=0)
       setTimeout("call("+count+")", 1000 );
    else {
        document.getElementById("number").innerHTML = "Avalible";
        document.getElementById('ch1').disabled = false;
    }
}

function init()
{
    document.getElementById('ch1').disabled = true;
    call(7); //7 seconds
}


You will have to change the input onclick event to:
<input name="commit" type="button" value="Commit" onclick="init();"/></td>


This post has been edited by Munawwar: 10 October 2010 - 08:40 AM

Was This Post Helpful? 0
  • +
  • -

#7 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: making a countdown that disables checkboxes

Posted 10 October 2010 - 08:39 AM

As indicated, CTphpnwb was close. What you need to do is keep the setTimeout at 1 sec and then just keep track of the remaining time in a variable. And you don't need the second call to setTimeout, just call the method directly.

<script type="text/javascript">
var my_delay = 7000;
function disable()
{
	document.getElementById('ch1').disabled = true;
    	document.getElementById("number").innerHTML = "Wait 7 seconds";

	while(my_delay > 0)
	{
  		setTimeout ( "enable()", 1000 );
		my_delay -= 1000;
	}
  	enable();
	my_delay = 7000;
}

function enable()
{

	if(my_delay > 0)
	{
		document.getElementById("number").innerHTML = "Wait "+(my_delay/1000)+ " seconds";
	} else {
		document.getElementById("number").innerHTML = "Available";
                document.getElementById('ch1').disabled = false;	
	}
}
</script>


Was This Post Helpful? 0
  • +
  • -

#8 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: making a countdown that disables checkboxes

Posted 11 October 2010 - 01:49 AM

Wait.

	while(my_delay > 0)
	{
  		setTimeout ( "enable()", 1000 );
		my_delay -= 1000;
	}
  	enable();



This will make enable() run seven times in rapid succession. Not what you want.
Personally, I'd look into using setInterval instead.

Quote

im not sure that anything was wrong with the countdown part of the javascript before, I just wanted to show in text the countdown happening live.


This shows that you don't understand what's happening in the code at all: setTimeout is not some sort of magical countdown, it's like when your dog wakes up when the cock crows. It knows nothing of how long it has left to go.
Was This Post Helpful? 0
  • +
  • -

#9 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: making a countdown that disables checkboxes

Posted 11 October 2010 - 03:24 AM

Use setInterval or setTimeout, there will be slight difference in code.

I thought I already answered this topic - copy and paste the following into an html file,open it in a browser and click the 'Commit' button :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.align_center {
	text-align: center;
}
.align_left {
	text-align: left;
}

.table_border {
	border: 1px solid #FFFFFF;
	background-color: #666666;
}
</style>
<script type="text/javascript">
function call(count)
{
	document.getElementById("number").innerHTML = "Wait "+count+" seconds";
	count--;
	if(count>=0)
		setTimeout("call("+count+")", 1000 );
	else {
		document.getElementById("number").innerHTML = "Avalible";
		document.getElementById('ch1').disabled = false;
	}
}

function init()
{
	document.getElementById('ch1').disabled = true;
	call(7);
}
</script>


</head>

<body style="color: #FFFFFF; background-color: #333333">
<div style="width: 1288px" class="contain">
<br />
<form>
<table align="center" style="width: 27%; height: 122" class="table_border">
		<tr>
		<td style="width: 32px"><input id="ch1" name="checkbox1" type="checkbox"/></td>
		<td style="width: 231px" class="align_left">Rob someone of the street.</td>
		<td class="align"><div id="number">	</div></td>
	</tr>
	<tr>
		<td class="align" colspan="3">
		<input name="commit" type="button" value="Commit" onclick="init();"/></td>
	</tr>
	</table>
</form>
<br />
</div>
</body>
</html>


Tested on IE 8,FF 3.6,Chrome 6, Opera 10.5.
Was This Post Helpful? 2
  • +
  • -

#10 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2911
  • View blog
  • Posts: 10,085
  • Joined: 08-August 08

Re: making a countdown that disables checkboxes

Posted 11 October 2010 - 06:01 PM

View Postmoopet, on 11 October 2010 - 03:49 AM, said:

Wait.

	while(my_delay > 0)
	{
  		setTimeout ( "enable()", 1000 );
		my_delay -= 1000;
	}
  	enable();



This will make enable() run seven times in rapid succession. Not what you want.
Personally, I'd look into using setInterval instead.

Yeah, I was in a hurry.
This works, but on my system each "second" is more like five. :eek:
Ugh! I should have looked at Munawwar's code. I would have seen my problem and fixed it sooner:
<script type="text/javascript">
var my_delay = 7;
function disable()
{
//	document.getElementById('ch1').disabled = true;
	if(my_delay > 0)
	{
    	//alert(my_delay);
    	document.getElementById("number").innerHTML = 'Wait '+ my_delay +' seconds';
  		setTimeout("enable();", 1000 );
	} else {
		document.getElementById("number").innerHTML = "Available";	
	}
}

function enable()
{
//	document.getElementById('ch1').disabled = false;
	if(my_delay > 0)
	{
		document.getElementById("number").innerHTML = "Wait "+my_delay+ "seconds";
		my_delay--;
	}
	disable();
}
</script>
<div id="number">timer</div>
<script type="text/javascript">
disable();
</script>

This post has been edited by CTphpnwb: 13 October 2010 - 04:57 PM

Was This Post Helpful? 0
  • +
  • -

#11 TheMaster1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-October 10

Re: making a countdown that disables checkboxes

Posted 13 October 2010 - 10:28 AM

Could someone explain how you could keep the timer ticking if the user decides to refresh the page?
Was This Post Helpful? 0
  • +
  • -

#12 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2911
  • View blog
  • Posts: 10,085
  • Joined: 08-August 08

Re: making a countdown that disables checkboxes

Posted 13 October 2010 - 04:47 PM

You could use ajax to send/retrieve the time left to/from the server, or you could store it in a cookie. The former is more secure, but the latter is easier and less likely to take more than a second!
Was This Post Helpful? 0
  • +
  • -

#13 TheMaster1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-October 10

Re: making a countdown that disables checkboxes

Posted 14 October 2010 - 08:33 AM

so could I use php to send what the time is to a mysql database?
Was This Post Helpful? 0
  • +
  • -

#14 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2911
  • View blog
  • Posts: 10,085
  • Joined: 08-August 08

Re: making a countdown that disables checkboxes

Posted 14 October 2010 - 08:54 AM

Yes, or you could store it in a session variable, which of course relies on a cookie, but it's harder for a user to mess with that using Javascript and another cookie.
Was This Post Helpful? 1
  • +
  • -

#15 TheMaster1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-October 10

Re: making a countdown that disables checkboxes

Posted 15 October 2010 - 11:02 AM

could you help me store the countdown in a session variable, where would i start
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2