How to create dynamic textfield based on radio button's input

Question

I am trying to get a form's textfield to dynamically appear based on a radio checkbox selection.

For example, on my form...there is a radio button that ask "Do you want to enter your age?" with an option to check YES or NO. If the user check YES, a textfield dynamically appear after this so the the user can enter his or her age. If user check NO, then nothing happen.

How do I begin to do something like this? Just looking for any feedback I can get. Thanks!

Answer 1

Add in the the text-field to the markup, and then add a class to hide it. On the change event of the radio checkbox, toggle the class on or off, depending on the selection. This will hide or show the text-field. If you have no javascript experience, many of the popular libraries have more simple APIs for all of this stuff.

In jQuery it's:

$('#radioID').change(function(){
  if ($(this).val() === 'YES') {
    $('#textfieldId').show();
  }
  else {
    $('#textfieldId').hide();
  }
});

Answer 2

$('input[name=thename][value=yes]').change(function()
    {
       if ($(this).is(':checked')
       {
           // append your textfield
       }
    }
);