Javascript 'getElementByID' with radio buttons

Rad

...
Reaction score
228
Im trying to use the old code DDRtist gave to me in this thread...

Note: to test the code below easily use this form :)

Code:
<script>
function GenName()
{
	var style = document.getElementById('get_style').value;
	document.getElementById('changeme').innerHTML = style;
	
}
</script>

<input type="radio" id="get_style" name="style" value="xspf_player_slim.swf?song_url" checked="checked"/> MP3
<input type="radio" id="get_style" name="style" value="xspf_player.swf?playlist_url" /> XSPF
<BR><BR>
<input type="submit" onclick="GenName()" />
<div id="changeme"></div>

This ALWAYS returns the same value, even if nothing is checked. Although this does work for inputs and stuff... Radio buttons seem to just send the value of the input, and not which input is checked.

How do I make it only return the value of the checked radio button?
 

mase

____ ___ ____ __
Reaction score
154
You have two different inputs with the same id. That is your problem.
I'll make a script that changes from one to another when you click the radio button. If you want to add another style add it to the styles[] var.

HTML:
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Change Player Page</title>
<script>
var currentchoice = 0;
var styles = new Array();
styles[1] = "xspf_player_slim.swf?song_url";
styles[2] = "xspf_player.swf?playlist_url";
function changeStyle(x){
	document.getElementById('changeme').innerHTML = styles[x];
}
</script>
</head>
<form action="#">
<label><input type="radio" id="get_style1" name="style" value="xspf_player_slim.swf?song_url" onclick="javascript:changeStyle('1');" /> MP3</label>
<label><input type="radio" id="get_style2" name="style" value="xspf_player.swf?playlist_url" onclick="javascript:changeStyle('2');" /> XSPF</label>
</form>
<div id="changeme"></div>
</body>
</html>
 

Rad

...
Reaction score
228
Code:
<head> 
<script> 
  var currentchoice = 0; 
  var styles = new Array(); 
  styles[1] = "xspf_player_slim.swf?song_url"; 
  styles[2] = "xspf_player.swf?playlist_url"; 
  function changeStyle(x)
  {
    style = styles[x]; 
  } 
  function GenName()
  {
    document.getElementById('changeme').innerHTML = style;
  }
</script> 
</head> 

<form action="#">
<label>
<input type="radio" id="get_style1" name="style" value="xspf_player_slim.swf?song_url" onclick="javascript:changeStyle('1');" /> MP3
</label>
<label>
<input type="radio" id="get_style2" name="style" value="xspf_player.swf?playlist_url" onclick="javascript:changeStyle('2');" /> XSPF
</label> 
<BR><BR>
</form> 
<input type="submit" onclick="GenName()" />
<BR><BR>
<div id="changeme"></div>
</body>


edit - Got it to work if you didn't read this already :p

Thanks mase!
 

mase

____ ___ ____ __
Reaction score
154
Lol, I forgot to remove the currentchoice variable >< I was messing around with other functions tryin to make it so wouldn't have to keep adding styles (which I found out wasn't neccesary).
You should delete the "var currentchoice = 0;", its useless.
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Staff online

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top