Selecting A radio buttons to add another input in jquery/javascript

Question

I am trying to learn jQuery, by putting what I've learned into practice. So, here's my coding problem.

I have two buttons, one "yes" and one "no". Once the "Yes" radio button is selected, a new text input is to appear.

my jquery below:

$(document).ready(function(){ 
    $("#many").hide();
var isChecked = $("#dform input" ).change(function() {
    $("input[name=question]:checked", "#dform").val();  
  if(isChecked == yes){
    $("#many").show();
  }else {$("#many").hide();}
   });
});

my code-pen

I used this answer added the value function in a variable, then used it in a conditional statement. I put the value $("input[name=question]:checked", "#dform").val(); in an alert to make sure that the value attached to the "yes" radio button has been captured. However, when I put the .val() function in a variable and use it in a conditional statement, it doesn't work.

Did I set the Jquery up correctly?

*"Did I set the Jquery up correctly"* ... hit F12 on keyboard and look at ***console***. Will answer that question immediately by reading error messages. — charlietfl, Jul 21 '16 at 18:12
should see red error messages assuming this code is actually in your page and inside a script tag — charlietfl, Jul 21 '16 at 18:19
In order for the "IsChecked" variable to ever receive a value, your function must "return" a value, i am not sure if on change events support this. Please see my answer as performing the change within the on change event makes more sense to me — 2b77bee6-5445-4c77-b1eb-4df3e5, Jul 21 '16 at 18:21
@user3845646 it does already have value and that is the jQuery object. — charlietfl, Jul 21 '16 at 18:22
codepen must be suppressing error then because `yes` is undefined and will throw error — charlietfl, Jul 21 '16 at 18:24
oh okay. but I don't understand why yes would be undefined even though I set yes as a value in html. — hnewbie, Jul 21 '16 at 18:29

score 1 · Answer 1 · answered Jul 21 '16 at 18:20

1

Try something like this

<script>
$(document).ready(function () {

    $("#many").hide();

    $("input[name='question']").click(function () {

        if ($('#yes').is(':checked')) { $("#many").show(); } 

        else { $("#many").hide(); }
    });
});
</script>

answered Jul 21 '16 at 18:20

Shrikant Mavlankar

1,145
1
8
17

With simple jQuery functions you can achieve this. Let me know if it works for you – Shrikant Mavlankar Jul 21 '16 at 18:53

score 1 · Answer 2 · answered Jul 21 '16 at 18:23

1

You're a little bit off track. You don't need to name your onChange handler (var isChecked...) and I think that's confusing you. I would try something more along the lines of this:

$(document).ready(function(){ 
  $("#many").hide();
  $("#dform input[name=question]").change(function() {
    if ($('#dform input[name=question]:checked').attr('value') == 'yes') {
      $("#many").show();
    } else {
      $("#many").hide();
    }
  });
});

answered Jul 21 '16 at 18:23

LGFaler

126
1
10

so by putting the onChange handler in a variable, made the "yes" value undefined? – hnewbie Jul 21 '16 at 18:39
@hnewbie I'm not sure I understand your question. Can you rephrase? – LGFaler Jul 21 '16 at 18:43
By putting `$("input[name=question]:checked", "#dform").val();` in the variable that I set, isChecked, did it make the value captured through the .val() function undefined? – hnewbie Jul 21 '16 at 19:22
@hnewbie if you did `var isChecked = $('#dform input[name=question]:checked').val();` that would have been just fine. Your original code, had `var isChecked = $("#dform input" ).change(function() { ...`, though. Later you tried referencing `isChecked`, but that variable was only assigned to your handler, not to the actual result you were looking for. – LGFaler Jul 21 '16 at 20:35

score 1 · Answer 3 · answered Jul 21 '16 at 18:23

Try this one to hide and show an element

$(document).ready(function(){ 
$("#many").hide();
 $("#dform input" ).change(function() {
     $("#many").show();
  });
  $("#no").change(function(){
    $("#many").hide();
  })
});

change html as:

<input type="radio" name="question" id="no" value="no" checked>

score 1 · Answer 4 · answered Jul 21 '16 at 18:33

There are different way to do it simple way to do it with Jquery addClass and Remove Class method

**HTML**
<h4>
Click on button to toggle
</h4>
<div style="padding:10px;">
<button class="show btn">Show</button>
<button class="hide btn">Hide</button>

</div>
<div>
<input type="text" id="name" class="displayN"/>
</div>

Jquery

$(document).ready(function(){

$(".show").click(function(){
    $("#name").addClass('displayB').removeClass("displayN");
});

$(".hide").click(function(){
    $("#name").addClass("displayN").removeClass("displayB");
})

});

Working Example: https://jsfiddle.net/mshyam83/u3wfpznn/

2b77bee6-5445-4c77-b1eb-4df3e5 · Accepted Answer · 2016-07-21T18:38:03.847

0

Please replace your js with this:

$(document).ready(function(){ 
    $("#many").hide();
    $("#dform input" ).change(function() {
    var val = $("input[name=question]:checked", "#dform").val();  
     if (val == "yes") {
       $("#many").show();
     } else {
       $("#many").hide();
     }
   });
});

I'm sure it could be cleaned up more, but its working anyway. The jQuery set up is fine. Code Pen: http://codepen.io/anon/pen/GqxGmp

edited Jul 21 '16 at 18:38

answered Jul 21 '16 at 18:15

2b77bee6-5445-4c77-b1eb-4df3e5

937
16
29

1

why would yes be undefined though? – hnewbie Jul 21 '16 at 18:31
@hnewbie You are correct! my original did not include the ":checked" attribute, so on page load the value would be undefined. Let me edit that! – 2b77bee6-5445-4c77-b1eb-4df3e5 Jul 21 '16 at 18:37

Selecting A radio buttons to add another input in jquery/javascript

5 Answers5