Jump to content

[SOLVED] onclick with radio instead of dropdown


php_b34st

Recommended Posts

hi, i have the following function:

function apply() {
obj = document.getElementById('formation');
for (var i = 0; i <= obj.options.length; i++) { 
if (obj.options[i].selected) { 
  		formation = obj.options[i].value; 
  		break;
} 
}

 

which is currently operated when a user selects an item from a dropdown and then clicks apply:

<select id="formation" name="formation" size="1" >
      <option value="442">4-4-2</option>
      <option value="433">4-3-3</option>
  </select>

    <input type="button" value="Apply" onclick="apply()">

 

however since there is only 2 options i would like to use radio inputs instead. I tried the following but cant get it to work:

 

    <input type="radio" id="formation" name="formation" value="442" onClick="apply()">4-4-2
    <input type="radio" id="formation" name="formation" value="433" onClick="apply()">4-3-3

 

Anyone know where im going wrong?

I am assuming you have a javascript variable called formation, right? That javascript loops through the options of the select object because the option object doesn't have an onclick event. For a radio button you can just do this:

<script type="text/JScript">
var formation = 0;
function apply(e)
{
formation = e.value;
}
</script>
<form>
<input type="radio" id="formation" name="formation" value="442" onClick="apply(this)">4-4-2
<input type="radio" id="formation" name="formation" value="433" onClick="apply(this)">4-3-3
</form>

yes i do have a variable called formation which uses a switch event to determine if its a 442 or 433 formation:

 

switch (formation) {
case "442":
	position(10, 165, 5);
	position(120, 185, 6);
	position(230, 185, 7);
	position(340, 165, ;
	position(120, 50, 9);
	position(230, 50, 10);
	break;
case "433":		
	position(70, 200, 5);
	position(175, 225, 6);
	position(280, 200, 7);
	position(10, 100, ;
	position(175, 50, 9);
	position(340, 100, 10);
	break;
}

 

I replaced my function with your function but it still does not do anything

Yes I did, here is what I have now:

 

<script type="text/javascript">
function position(x, y, id) {
var playerbox_x = document.getElementById("playerbox" + id);
var playerbox_y = document.getElementById("playerbox" + id);
playerbox_x.style.left = x + 'px';
playerbox_y.style.top = y + 'px';
}

var formation = 0;
function apply(e)
{
formation = e.value;
}

switch (formation) {
case "442":
	position(10, 165, 5);
	position(120, 185, 6);
	position(230, 185, 7);
	position(340, 165, ;
	position(120, 50, 9);
	position(230, 50, 10);
	break;
case "433":		
	position(70, 200, 5);
	position(175, 225, 6);
	position(280, 200, 7);
	position(10, 100, ;
	position(175, 50, 9);
	position(340, 100, 10);
	break;
}

}
</script>
</head>
<body>
<div class="content"> 
  <h1>Create a team</h1>
  <form name="formation_data" method="post" action="process.php">
    <div class="pitch"> 
      <input id="teamname" type="text" size=20 class="teamname" name="teamname" value="Team name" onclick="this.select()"\>
<?php
$position = array(
  array('430px', '175px'),
  array('300px', '10px'),
  array('320px', '120px'),
  array('320px', '230px'),
  array('300px', '340px'),
  array('165px', '10px'),
  array('185px', '120px'),
  array('185px', '230px'),
  array('165px', '340px'),
  array('50px', '120px'),
  array('50px', '230px')
);

foreach( $position as $player=>$place )
{
if($player == '0') {
	$shirt = 'images/keeper.png';
}
else {
	$shirt = 'images/shirt.png';
}

    echo '<div id="playerbox'.$player.'" class="playerbox" style="top:'.$place[0].'; left:'.$place[1].'; "> 
            <div style="background: url('.$shirt.') no-repeat center;" class="player"></div>
            <input type="text" id="player'.$player.'" name="player'.$player.'" size=6 maxlength=3 class="playername" onclick="this.select()" value="000"/>
          </div>';
  

}

?>
</div>
  <br>

  <input type="radio" id="formation" name="formation" value="442" onClick="apply(this)">4-4-2
<input type="radio" id="formation" name="formation" value="433" onClick="apply(this)">4-3-3
    <input type="submit" value="Submit Team">
  </form>

It doesnt seem to do anything, with the dropdown version it changes the positions of the text box's this does not seem to do anything. Im not sure if its working in the background, I tried to print the variable using document.write (formation); to see if it was changing but again nothing happened.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.