php_b34st Posted August 11, 2008 Share Posted August 11, 2008 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? Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 11, 2008 Share Posted August 11, 2008 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> Quote Link to comment Share on other sites More sharing options...
php_b34st Posted August 11, 2008 Author Share Posted August 11, 2008 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 Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 11, 2008 Share Posted August 11, 2008 Did you add the argument "this" to the call to the apply() function? on the radio buttons' onclick events, it should be like this: onclick="apply(this)" Quote Link to comment Share on other sites More sharing options...
php_b34st Posted August 11, 2008 Author Share Posted August 11, 2008 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> Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 11, 2008 Share Posted August 11, 2008 It worked fine for me. Does the value of the formation variable not change? You won't see anything change when you click it, but the value of the variable should be changing in the background. Quote Link to comment Share on other sites More sharing options...
php_b34st Posted August 12, 2008 Author Share Posted August 12, 2008 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. Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 12, 2008 Share Posted August 12, 2008 Get rid of the close curly brace below "formation = e.value;" and it should work. Quote Link to comment Share on other sites More sharing options...
php_b34st Posted August 12, 2008 Author Share Posted August 12, 2008 Yea thats sorted it thank you very much Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.