0

I'm trying to retrive a value of selected radio button but getting undefined value, why? Here is my code:

$(document).ready(function(){

 /* var col = document.querySelector('input[name="color"]:checked').value();(didn't work either) */

var col = $('input[name=color]:checked').val();

/* printing value (giving me undefined) */

document.write(col);

 Please pick your colour <br>
<input type = "radio" name="color" value="red">Red<br>
<input type = "radio" name="color" value="blue">blue<br>
<input type = "radio" name="color" value="green">green<br>
<input type = "radio" name="color" value="yellow">yellow<br>
brasofilo
  • 25,496
  • 15
  • 91
  • 179
Nidhi
  • 11
  • 3

3 Answers3

0

Try:

var col = $('input:radio[name=color]:checked').val();
rrtx2000
  • 626
  • 4
  • 13
  • This is the proper syntax for the command to get the value of the radio button. I copied it straight from some of my working code and just changed the name to color so it fits your code. One of the radio buttons needs to be selected for it to read a value though. You can try to put onclick="showcolor()" in each input tag and make a showcolor function. Have the showcolor function get the value then alert(col). Also, I assume your real code has it but your document ready function is missing the ending } – rrtx2000 May 09 '14 at 14:12
  • Here is what I'm trying to achive select color from the radio and paint the cell. – Nidhi May 09 '14 at 18:31
  • I'm able to retrive the value of of radio (if I checked the button already) but the same var is not passing into below selector var col = $('input[name=color]:checked').val(); $("#sh").click(function(){ $(this).css("background-color","col"); }); – Nidhi May 09 '14 at 18:42
  • Your original question was "I'm trying to retrive a value of selected radio button but getting undefined value, why?" Now you say you are able to retrieve the value and are asking something totally different. – rrtx2000 May 09 '14 at 19:12
  • I'm making a color picker panel, first q was how to retrieve the var once I retrieved it I wanted to paint the table cell with the selected value. Please note I'm able to retrieve the value of selected radio now with the code suggested by Avitus now I want to pass this into css selector.$('input[name=color]').on("click", function() { var col = $('input[name=color]:checked').val(); }); $("#sh").click(function(){ $(this).css("background-color","col"); }); – Nidhi May 10 '14 at 00:36
  • So now my issue is passing retrieved param 'col' to another function.Should it be asked in different thread? – Nidhi May 10 '14 at 02:53
0

If you're trying to do this on document ready, then there is no result because nothing is checked. To get the checked item when it changes:

$("input[name='color']").click(function(){    
    var col = $(this).val();
    console.log(col);
});
Jon B
  • 51,025
  • 31
  • 133
  • 161
0

The reason you're getting undefined is that nothing is selected on document ready. You have to give something the checked property if you want to have a value on load.

If you're trying to get the value when it's clicked then you need to have a click handler for that. Here is an example of binding the click event.

http://jsfiddle.net/4f7kC/

If you just want to get the value on load simply add a checked="checked" to any one of those radio buttons like so <input type = "radio" name="color" value="yellow" checked="checked">yellow<br>

Avitus
  • 15,640
  • 6
  • 43
  • 53
  • Thank you Avitus, I appreciate this.The example you have given is exactly what I want. Will try and let you all know that I'm able to retrieve the value of selected radio. – Nidhi May 09 '14 at 02:35
  • Avitis I'll do so once I get what I want. Somehow the http://jsfiddle.net/4f7kC/ is not working foe me? Will try from home .. – Nidhi May 09 '14 at 18:46
  • Avitis with your code I'm able to reteive the value of clicked radio now I want to do paint the s with selected colour $('input[name=color]').on("click", function() { var col = $('input[name=color]:checked').val(); }); $("#sh").click(function(){ $(this).css("background-color","col"); }); -- Please advise. – Nidhi May 10 '14 at 00:40
  • I'm getting [object Object] which I as a value of col for the – Nidhi May 10 '14 at 02:30
  • I'm getting[Object Object] as when $('input[name=color]').on("click", function() { var col = $('input[name=color]:checked').val(); /* alert(col); */ $("#sh").click(function(col){ alert(col); $(this).css("background-color","col"); }); – Nidhi May 10 '14 at 02:52