单选按钮值未定义

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.

Answer 1

 $(".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 /> 

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

Answer 2

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

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

Answer 3

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 />