Radio button value undefined

Question

I have the following radio buttons,

PHP Code:

<form class="small-box-footer" style="text-align:left;padding:10px;"  method="post" name="nameHere">
<?php
 $query = "SELECT * FROM subject";
 $result = mysql_query($query);
 while ($row39 = mysql_fetch_array($result)) {
    $Referrer_ID = $row39['Subject_ID'];
    $Referrer_Name = $row39['Subject_Name'];      
?>
<input type="radio" class="subject-selected" name="subject" value="<?=$Referrer_ID?>"> <?=$Referrer_Name?><?=$Referrer_ID?><br />                       
<?php } ?>                          
</form>

HTML generated:

<input type="radio" class="subject-selected" name="subject" value="2"> GCSE Maths2<br />

<input type="radio" class="subject-selected" name="subject" value="3"> GCSE English3<br />

<input type="radio" class="subject-selected" name="subject" value="4"> GCSE Science4<br />

<input type="radio" class="subject-selected" name="subject" value="5"> GCSE Art5<br />

<input type="radio" class="subject-selected" name="subject" value="6"> GCSE Sociology6<br />

<input type="radio" class="subject-selected" name="subject" value="8"> OCR Nationals ICT8<br />

<input type="radio" class="subject-selected" name="subject" value="9"> OCR Nationals Sports9<br />

<input type="radio" class="subject-selected" name="subject" value="10"> OCR Nationals Business Studies10<br />

<input type="radio" class="subject-selected" name="subject" value="11"> Entry Science11<br />

<input type="radio" class="subject-selected" name="subject" value="12"> Functional Skills English12<br />

<input type="radio" class="subject-selected" name="subject" value="13"> Functional Skills Maths13<br />

<input type="radio" class="subject-selected" name="subject" value="14"> ESOL14<br />

<input type="radio" class="subject-selected" name="subject" value="15"> Preparation for Working Life15<br />                                                        
  </form>

Below is the JavaScript

 $( ".centre-selection" ).each(function() {
          if ($('input.subject-selected').is(':checked'))
            alert($('input[name=subject]:selected').val());
            //$( this ).attr( 'href', '?module=<?=$_REQUEST['module']?>&Subject='+ $( this ).attr('data-subject')+ '&Centre_Selected_ID='+ $( this ).attr('data-centre')+ '&Class_Selected_Year='+ $( this ).attr('data-year')+ '&Class_Selected_All='+ $( this ).attr('data-all-centre')+ '&StartDate='+ $( this ).attr('report_date_start')+ '&EndDate='+ $( this ).attr('data-attendance-check-end'));
            $( this ).attr( "href", '?module=module_progress_report&Subject='+ $('input[name=subject]:selected').val()+ '&Centre_Selected_ID='+ encodeURIComponent($( this ).attr('data-centre')) + '&Class_Selected_Year='+ encodeURIComponent($( this ).attr('data-year')) + '&Class_Selected_All='+ encodeURIComponent($( this ).attr('data-all-centre')) +'&StartDate='+$('#report_date_start').val()+'&EndDate=18/12/2016');
 } );

Problem:

$('input[name=subject]:selected').val() does not pick up the value of the radio button. It shows result undefined. I also tried method 1 and method 2 but both the results are undefined.

Update

I updated my JavaScript and now it looks like,

$( document ).ready(function() {  

$('.subject-selected').change(function(){
           // $("#centre-class-menu").toggle();
$("#alert").toggle();
$("#centre").toggle();
$(".range").toggle();
});

var value;
$(".subject-selected").change(function() {//changed the class to correct class selector
  if ($(this).is(':checked')) {//use $(this).is(':checked')
    console.log($(this).val());
    value = $(this).val();
    console.log(value);
  }
});


      $( ".centre-selection" ).each(function() {

            //$( this ).attr( 'href', '?module=<?=$_REQUEST['module']?>&Subject='+ $( this ).attr('data-subject')+ '&Centre_Selected_ID='+ $( this ).attr('data-centre')+ '&Class_Selected_Year='+ $( this ).attr('data-year')+ '&Class_Selected_All='+ $( this ).attr('data-all-centre')+ '&StartDate='+ $( this ).attr('report_date_start')+ '&EndDate='+ $( this ).attr('data-attendance-check-end'));
            $( this ).attr( "href", '?module=module_progress_report&Subject='+value+ '&Centre_Selected_ID='+ encodeURIComponent($( this ).attr('data-centre')) + '&Class_Selected_Year='+ encodeURIComponent($( this ).attr('data-year')) + '&Class_Selected_All='+ encodeURIComponent($( this ).attr('data-all-centre')) +'&StartDate='+$('#report_date_start').val()+'&EndDate=18/12/2016');
          } );


});

I see nothing displayed on console and value send is undefined.

use `:checked` instead of `:selected` in `alert($('input[name=subject]:selected').val());` — guradio, May 25 '16 at 07:57
You can use the [`$.param`](http://api.jquery.com/jquery.param/) method for generating the URI query string. — Ram, May 25 '16 at 08:01

guradio · Answer 1 · 2016-05-25T08:18:13.930

$(".subject-selected").change(function() {//changed the class to correct class selector
  if ($(this).is(':checked')) {//use $(this).is(':checked')
    console.log($(this).val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="subject-selected" name="subject" value="2">GCSE Maths2
<br />

<input type="radio" class="subject-selected" name="subject" value="3">GCSE English3
<br />

<input type="radio" class="subject-selected" name="subject" value="4">GCSE Science4
<br />

<input type="radio" class="subject-selected" name="subject" value="5">GCSE Art5
<br />

<input type="radio" class="subject-selected" name="subject" value="6">GCSE Sociology6
<br />

<input type="radio" class="subject-selected" name="subject" value="8">OCR Nationals ICT8
<br />

<input type="radio" class="subject-selected" name="subject" value="9">OCR Nationals Sports9
<br />

<input type="radio" class="subject-selected" name="subject" value="10">OCR Nationals Business Studies10
<br />

<input type="radio" class="subject-selected" name="subject" value="11">Entry Science11
<br />

<input type="radio" class="subject-selected" name="subject" value="12">Functional Skills English12
<br />

<input type="radio" class="subject-selected" name="subject" value="13">Functional Skills Maths13
<br />

<input type="radio" class="subject-selected" name="subject" value="14">ESOL14
<br />

<input type="radio" class="subject-selected" name="subject" value="15">Preparation for Working Life15
<br />

Use change, to get the value during changing event
Use $(this).is(':checked') to check if checked

you have 2 change event for this `$('.subject-selected').change(function(){` can you remove one @FahadUddin — guradio, May 25 '16 at 08:21
Now it does display the value on the console but in the link it is still undefined. — , May 25 '16 at 08:40
Its another list of items from the database. When the user clicks on it, it needs to open a link sending the previous selections on that link. — , May 25 '16 at 08:50

Destrif · Answer 2 · 2016-05-25T08:20:35.560

0

I think you are missing the quote:" or ' in your example: $('input[name="subject"] :selected').val()

https://api.jquery.com/attribute-equals-selector/

edited May 25 '16 at 08:20

answered May 25 '16 at 08:08

Destrif

2,104
1
14
22

score 0 · Answer 3 · answered May 25 '16 at 08:16

Please try this

$( document ).ready(function() {
$(".subject-selected").change(function() {
  if ($(this).is(':checked')) {
 alert($(this).val());
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="subject-selected" name="subject" value="2">GCSE Maths2
<br />

<input type="radio" class="subject-selected" name="subject" value="3">GCSE English3
<br />

<input type="radio" class="subject-selected" name="subject" value="4">GCSE Science4
<br />

<input type="radio" class="subject-selected" name="subject" value="5">GCSE Art5
<br />

<input type="radio" class="subject-selected" name="subject" value="6">GCSE Sociology6
<br />

<input type="radio" class="subject-selected" name="subject" value="8">OCR Nationals ICT8
<br />

<input type="radio" class="subject-selected" name="subject" value="9">OCR Nationals Sports9
<br />

<input type="radio" class="subject-selected" name="subject" value="10">OCR Nationals Business Studies10
<br />

<input type="radio" class="subject-selected" name="subject" value="11">Entry Science11
<br />

<input type="radio" class="subject-selected" name="subject" value="12">Functional Skills English12
<br />

<input type="radio" class="subject-selected" name="subject" value="13">Functional Skills Maths13
<br />

<input type="radio" class="subject-selected" name="subject" value="14">ESOL14
<br />

<input type="radio" class="subject-selected" name="subject" value="15">Preparation for Working Life15
<br />

Radio button value undefined

Update

3 Answers3