CODEWITHSUNDEEP
jqueryhtmlformsradio-button
kexxcream
kexxcream

Reputation: 5933

Obtain id value from radio button using jQuery

Problem:

To obtain the id from a radio button using jQuery on click or without. The jQuery should detect if the value is already set and choose it or choose it upon click.

HTML code (Scenario 1 - no selection is made):

<th><input type="radio" name="itemquestion" id="1" value="11"></th>
<th><input type="radio" name="itemquestion" id="2" value="12"></th>
<th><input type="radio" name="itemquestion" id="3" value="13"></th>
<th><input type="radio" name="itemquestion" id="4" value="14"></th>
<th><input type="radio" name="itemquestion" id="5" value="15"></th>

HTML code (Scenario 2 - selection has been made):

<th><input type="radio" name="itemquestion" id="1" value="11"></th>
<th><input type="radio" name="itemquestion" id="2" value="12" checked="checked"></th>
<th><input type="radio" name="itemquestion" id="3" value="13"></th>
<th><input type="radio" name="itemquestion" id="4" value="14"></th>
<th><input type="radio" name="itemquestion" id="5" value="15"></th>

jQuery code:

$('input[type=radio]', $('#itembuttons')).click(
    function() {
        var pos = $(this).parent().index() + 1;
        $('#itemresponse').val(pos);
    }
);

Question:

How can the jQuery be modified so in addition to act on click() also detect which radio button has already been checked on submit and return that id (in this case it's 2)? In other words, a user can submit the form without clicking a radio button but I want #itemresponse to contain the id value 2.

Upvotes: 0

Views: 4391

Answers (4)

Nope
Nope

Reputation: 22329

For completness as you were asking for both.

Store selection on load (as specified by John Lawrence): 

$(document).ready(function () {
    var selected_id = $('input[type="radio"]:checked').attr("id");
    $('#itemresponse').val(selected_id);
});

User changes selection: 

$('input[type="radio"][name="itemquestion"]').click(
    function() {
        var pos = $(this).attr('id');
        $('#itemresponse').val(pos);
    }
);

DEMO

Upvotes: 1

John Lawrence
John Lawrence

Reputation: 2923

If you want to be populated before the user clicks on a radio button, you could add this to set the value when the page is loaded: 

$(document).ready(function () {
    var selected_id = $('form input[type=radio]:checked').attr("id");
    $('#itemresponse').val(selected_id);
}

Upvotes: 1

Alex
Alex

Reputation: 6406

You need to check if a radio button is checked before submitting the form. Try something like this:

$('#form').on('submit', function(e){
    if($('input[type=radio]:checked', $('#itembuttons')).length > 0){
        //Checked, do nothing
        //var pos = $('input[type=radio]:checked').attr('id');
    }else{
        //Not checked: Append an input
        $('#form').append('<input type="hidden" name="itemquestion" value="2" />');    
    }
});​​​​​​

Upvotes: 1

Dmitry Kudryavtsev
Dmitry Kudryavtsev

Reputation: 17584

Add a .submit event handler on the form, something like this

$('#myform').submit(function(){
    var $selected = $('input[type="radio"]​​​​:checked');
    //Extract the value you need here either $selected.attr('id'); or whatever
});

I use the .checked selector

Note: I'm not clear about what you mean when you say which radio button has already been checked on submit and return that id

I'm not sure what id is referring to (the id attribute? because you did some calculations with parent and index), so I put a comment in the function, do your needed calculations there.

Good luck!

Upvotes: 1

Related Questions