0

I'm trying to print text depending on which radio button is checked. Can you tell me what's wrong?

Just getting the "error" output.

<input type="radio" name="feedback-form-visit-again" id="genderm" class="gendercheck" value="0" required> m
<input type="radio" name="feedback-form-visit-again" id="genderw" class="gendercheck" value="1"> w

<span class="gendertest">*Output*</span>

$(document).ready(function() {
  $(".gendercheck").change(function() {
    if (gender.value == 0) {
      $(".gendertest").text("m");
    } else if (gender.value == 1) {
      $(".gendertest").text("w");
    } else {
      $(".gendertest").text("error");
    }
  });
});
Improve this question
3

2 Answers 2

Reset to default
1

You just need to define gender in your code (since your trying to access the value property of gender via gender.value).

Try something like this (I tested and it works, by the way): 

$(document).ready(function() {
  $('.gendercheck').change(function() {
    var selectedRadio = $('.gendercheck:checked'); // this is the "checked" radio button that has the class you're using. using .value would be more of the vanilla JS way, which isn't bad, but if you wanted to do it the jQuery way, just get the val like this --> selectedRadio.val(); 
    if (selectedRadio.val() == 0) {
      $('.gendertest').text('m');
    } else if (selectedRadio.val() == 1) {
      $('.gendertest').text('w');
    } else {
      $('.gendertest').text('error');
    }
  });
});

For fun, just wanted to show you an example with fewer lines of code. Basically, print the radio input's value instead of defining the if/else statements. You'd need to modify your html inputs: 

<input type="radio" name="feedback-form-visit-again" id="genderm" class="gendercheck" value="m" required> men
<input type="radio" name="feedback-form-visit-again" id="genderw" class="gendercheck" value="w"> women

$(document).ready(function() {
  $('.gendercheck').change(function() {
    var selectedRadio = $('.gendercheck:checked'); // the checked radio
    $('.gendertest').text( selectedRadio.val() ); // output with the radio input's val
  });
});
Improve this answer
6
  • this in the change handler for radio buttons will be the one that was selected. no reason to look it up.
    – Taplar
    Commented Feb 13, 2019 at 22:25
  • @Taplar - true, but given the question related to jQuery, I was just showing the "jQuery way".
    – MikeTT
    Commented Feb 13, 2019 at 22:36
  • Doing it the "jQuery way" doesn't mean introducing unnecessary lookups
    – Taplar
    Commented Feb 13, 2019 at 22:37
  • Calling it "unnecessary" seems more pedantic than anything. Lots of folks start out learning JS via jQuery. Since the OP is specifically looking at how to do it via jQuery, showing it this way offers more detail on jQuery's methods.
    – MikeTT
    Commented Feb 13, 2019 at 23:03
  • It's teaching people an inefficent way to use the library, which just encourages people to use it incorrectly and promote the idea amongst some people that the library isn't efficient. And yes, given that you already have a reference to the element with this or the e.target off the event that you can pass in, it is highly unnecessary.
    – Taplar
    Commented Feb 13, 2019 at 23:05
0 

$(".gendercheck").on("change", function() {
  var selected_ID = ($(this).attr('id'));
  if (selected_ID == "genderm") {
    $(".gendertest").text("m");
  } else if (selected_ID == "genderw") {
    $(".gendertest").text("w");
  } else {
    $(".gendertest").text("error");
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="feedback-form-visit-again" id="genderm" class="gendercheck" value="0" required> m
<input type="radio" name="feedback-form-visit-again" id="genderw" class="gendercheck" value="1"> w
<br>
<span class="gendertest">*Output*</span>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.