Javascript 'getElementByID' with radio buttons

Discussion in 'General Webmaster Support' started by Rad, Aug 6, 2007.

  1. Rad

    Rad ...

    Ratings:
    +228 / 0 / -0
    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?
     
  2. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    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>
    
     
  3. Rad

    Rad ...

    Ratings:
    +228 / 0 / -0
    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!
     
  4. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    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.
     

Share This Page