Disable input button on timer help

EchoFool · January 14, 2009

I have a while loop that loops out 3 input buttons. Each of these input buttons have their own reload time which i use javascript to enable them when that reload time is met. How ever my code does not work, the JS only seems to take affect on the last of the 3 input buttons that is echo'd in the while loop and I do not know why.

Here is my code:

<?php
$Short = 0;
$ShortRange = 3;
While($Short != $ShortRange){
   
   If($Short == 1){
   $ReloadTime = 1000;
   }ElseIf($Short == 2){
   $ReloadTime = 3000;
   }ElseIf($Short == 3){
   $ReloadTime = 5000;
   }
?>

<script type="text/javascript">
var c = 0,
minNum = <?= $Short ?>,
maxNum =0;


function counter() {
var btnattack = document.getElementById('Short[<?=$Short?>]');
btnattack.disabled = true;
if (c < 2) {
	btnattack.disabled = true;
	btnattack.value = 'Reloading...';
	c++;
	setTimeout("counter()", <?=$ReloadTime?>);
} else {
	btnattack.disabled = false;
	btnattack.value = 'Attack number <?=$Short+1?>';
}
}
window.onload = function() {
counter();
}
</script>

<input type="submit" id="Short[<?=$Short?>]" name="Short[<?=$Short?>]" value="Attack number <?=$Short+1?>"> <br><br>


<?php
$Short = $Short + 1;
}
?>

Hope you can help me

xtopolis · January 15, 2009

It looks like you are overwriting the counter() function each time.

Put the counter function somewhere in your pages <head></head> tags. The you could probably make it loop through all the input tags with an id/name like Short# (getAttribute function) and apply your counter logic to them.

EchoFool · January 15, 2009

You've lost me a bit on how to loop through them? That would reduce my script size considerable but i can't think logically how it can be done :S

xtopolis · January 15, 2009

Here is ONE example of looping through inputs. There are many other ways I'm sure, this was just the one that came to mind.

(This is a mixture of PHP / JS - PHP generates the inputs [like yours] and JS will act on them]

<?php
error_reporting(E_ALL);

$short = 0;
$shortRange = 3;

$inputs = '';
for($short = 0; $short < $shortRange; $short++){
  $inputs .= "<input type='submit' id='short$short' name='short' value='Attack number ". ($short + 1) ."'><br /><br />\n";
}

?>
<html>
<head>
<script type="text/javascript">
function countInputs()
{
  myForm = document.getElementById('myForm');
  
  formInputs = myForm.getElementsByTagName('input');
  
  var debug = '';
  for(var i = 0; i < formInputs.length; i++)
  {
    if(formInputs[i].getAttribute('name') == 'short'){
      debug += formInputs[i].getAttribute('id') + ' is an input with the name attribute == short.<br />';
    }
  }
  
  document.getElementById('debug').innerHTML = debug;
}
</script>
</head>
<body>
<form id='myForm'>
<?php echo $inputs; ?>
<br />
<a href="#" onclick="countInputs();return false;">Count Inputs with name=short</a>
<p id="debug"></p>
</form>
</body>
</html>

EchoFool · January 15, 2009

Thank you for the reply

I have put the script into mine which looks like this, but when ever i press a submit button, that particular submit button doesn't disable.. infact nothing happens at all. Not sure why? Did i do some thing wrong ?

<?php
error_reporting(E_ALL);

$short = 0;
$shortRange = 3;

$inputs = '';
for($short = 0; $short < $shortRange; $short++){
  $inputs .= "<input type='submit' id='short$short' name='short' value='Attack number ". ($short + 1) ."'><br /><br />\n";
}

?>
<script type="text/javascript">
function countInputs()
{
  myForm = document.getElementById('myForm');

  formInputs = myForm.getElementsByTagName('input');

  var debug = '';
  for(var i = 0; i < formInputs.length; i++)
  {
    if(formInputs[i].getAttribute('name') == 'short'){
      debug += formInputs[i].getAttribute('id') + ' is an input with the name attribute == short.<br />';
    }
  }

  document.getElementById('debug').innerHTML = debug;
}
</script>

<form id='myForm'>
<?php echo $inputs; ?>
<br />
<a href="#" onclick="countInputs();return false;">Count Inputs with name=short</a>
</form>
<p id="debug">
</p>

xtopolis · January 15, 2009

You posted my exact same code. I didn't make it do what you wanted, I showed you that you could loop through the inputs in a form and uniquely identify them.

EchoFool · January 16, 2009

I see. Ok well i tried this:

<?php
$Short = 0;
$ShortRamge = 12;
?>

<script type="text/javascript">
var c = 0,
minNum = <?= $Short ?>;


function counter(num) {
var btnattack = document.getElementById('Short['+num+']');
btnattack.disabled = true;
if (c < 2) {
	btnattack.disabled = true;
	btnattack.value = 'Wait... ' + (2-c);
	c++;
	setTimeout("counter("+num+")", 1000);
} else {
	btnattack.disabled = false;
	btnattack.value = 'Attack number '+num;
}
}
</script>

<?php
function createInput($num){
?>
<input type="submit" id="Short[<?=$num?>]" name="Short[<?=$num?>]" value="Attack number <?=$num?>"> <br><br>
<?php
}
While($Short != $ShortRange){
createInput($Short+1);
$Short = $Short + 1;
}
?>
<script type="text/javascript">
window.onload = function(){
	var maxNum = <?= $Short ?>;

	for(var i = minNum + 1; i < maxNum; i++) {
		counter(i);
	}	
}
</script>

But it still doesn't work correctly as the first two outputted input buttons disable as if they are grouped, no idea why and the other buttons do nothing at all. =/

xtopolis · January 16, 2009

I have corrected the code you've given me so that it at least "works" in part. Things you should be aware of:

1) Stop using <?= to echo; it's bad practice. You should stick with <?php echo .

2) Leave error_reporting on (my first line of code) while you test, it will tell when things go wrong with PHP

3) Learn how to create functions.. You had the php input creater improperly formed.. and I don't know what you expected to happen...

4) Javascript.. You needed both of them above the php... this page isn't even properly formed.. you may want to try to make it a proper page with <head> and <body> tags so that you can organize stuff.

<?php
error_reporting(E_ALL);

$Short = 0;
$ShortRange = 12;
//------------------------------
function createInput($num)
{
  return '<input type="submit" id="Short['.$num.']" name="Short['.$num.']" value="Attack number '. $num .'"> <br><br>';
}
//------------------------------
?>
<script type="text/javascript">
  var minNum = <?php echo $Short ?>;
  var maxNum = <?php echo $ShortRange ?>;
  var c = 0;

window.onload = function(){

  for(var i = minNum + 1; i < maxNum; i++)
  {
     counter(i);
  }   
}

function counter(num) {
   var btnattack = document.getElementById('Short['+num+']');
   btnattack.disabled = true;
   if (c < 2) {
      btnattack.disabled = true;
      btnattack.value = 'Wait... ' + (2-c);
      c++;
      setTimeout("counter("+num+")", 1000);
   } else {
      btnattack.disabled = false;
      btnattack.value = 'Attack number '+num;
   }
}
</script>
<?php

While($Short != $ShortRange){
   echo createInput($Short+1)."\n";
   $Short = $Short + 1;
   }
?>

EchoFool · January 19, 2009

Thanks for the info dude.

Though judgeing from about 4 forums responses to do with JS i think my idea cannot be achieved. I'll have to change my ideas. Thanks for the help though.

Sign In

Disable input button on timer help

Recommended Posts

EchoFool

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

EchoFool

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

EchoFool

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

EchoFool

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

EchoFool

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information