Passing radio button values to Javascript

Question

This is my HTML

<tr>
    <td class="g">
    Gender
    </td>
    <td class="g_input">
        <input type="radio" name="gender" id="settings_gender" value="Male" checked />&nbsp;&nbsp;Male &nbsp;&nbsp;&nbsp;
    <input type="radio" name="gender" id="settings_gender" value ="Female" />&nbsp;&nbsp;Female
    </td>
</tr>

This is the javascript

$(document).ready(function () {
    $(".update-basic-info").click(function () {
        var gender = $("#settings_gender").val();

        alert(gender);
    });
});

The output is only showing Male, when i check the female radio button, it still shows male

ID's should be unique - that's why - It will only get the first element it finds with that ID — wirey00
– wirey00, Commented Mar 13, 2013 at 19:01

JLRishe · Accepted Answer · 2013-03-13 19:09:42Z

4

ID's should be unique on your page. You can do it using a class or just the name attribute

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

or changing the ID to class

<input type="radio" name="gender" class="settings_gender" value="Male" checked />&nbsp;&nbsp;Male &nbsp;&nbsp;&nbsp;
<input type="radio" name="gender" class="settings_gender" value ="Female" />&nbsp;&nbsp;Female

var gender = $(".settings_gender:checked").val();

Working jsFiddle: http://jsfiddle.net/TvVFM/

edited Mar 13, 2013 at 19:09

JLRishe

102k19 gold badges138 silver badges171 bronze badges

answered Mar 13, 2013 at 19:04

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

writeToBhuwan · Accepted Answer · 2013-03-13 19:24:56Z

0

$('input[name=gender]').click(function(){
     alert($(this).val());
});

or set the class of both radio buttons to "settings_gender" and try this

$('.settings_gender').click(function(){
     alert($(this).val());
});

answered Mar 13, 2013 at 19:24

writeToBhuwan

3,28111 gold badges42 silver badges67 bronze badges

Collectives™ on Stack Overflow

Passing radio button values to Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related