1

I have a form that I need to only show certain options based on the selection of the radio buttons at the top. For some reason it is not working properly. Any ideas? Below is the jsfiddle. Please let me know if this needs further explanation, and thanks!

http://jsfiddle.net/jmL7w2ed/

$('#choose-one').change(function () {
   if ($('#choose-one:checked').val() == 'Sold') {
        $('.resultDetail').hide();
        $('.resultDetail.sold').show();
    } else if ($('#choose-one:checked').val() == 'Not Demoed') {
        $('.resultDetail').hide();
        $('.resultDetail.notDemoed').show();
    } else if ($('#choose-one:checked').val() == 'Not Sold') {
        $('.resultDetail').hide();
        $('.resultDetail.notSold').show();
    }
});
cameron
  • 420
  • 5
  • 17

2 Answers2

3

Your selection is based on an ID so it is always selecting the first radio.

It is better to select the radios based on their name as follows :

$('input[type=radio][name=choose-one]')

and you can access the value using $(this).val() rather than selecting a set again.

 $('input[type=radio][name=choose-one]').change(function () {
        //console.log($(this).val());

        var value = $(this).val();

        if (value == 'Sold') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.sold').slideDown('500');
        } else if (value == 'Not Demoed') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.notDemoed').slideDown('500');
        } else if (value == 'Not Sold') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.notSold').slideDown('500');
        } else if (value == 'Demoed') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.notSold').slideDown('500');
        }
    });

Here is a Working Fiddle

KAD
  • 10,972
  • 4
  • 31
  • 73
1

I updated your fiddle to the following:

$('.resultDetail').hide();
    $('#choose-one').on('change',function () {
        if ($('#choose-one:checked').val() == 'Sold') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.sold').slideDown('500');
        } else if ($('#choose-one:checked').val() == 'Not Demoed') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.notDemoed').slideDown('500');
        } else if ($('#choose-one:checked').val() == 'Not Sold') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.notSold').slideDown('500');
        } else if ($('#choose-one:checked').val() == 'Demoed') {
            $('.resultDetail').slideUp('500');
            $('.resultDetail.notSold').slideDown('500');
        }
    });

The most important part was including jQuery, which was not added to your fiddle. Please ensure that you have included jQuery.

See your updated fiddle

Ibanez
  • 409
  • 5
  • 16
  • Hmmm...I had added it, but must not have saved properly. Thanks. – cameron Sep 10 '15 at 14:13
  • This ain't a solution.. the divisions are not sliding up and down based on the radio selection – KAD Sep 10 '15 at 14:19
  • It still appears to not be working right. Only the first option ("Sold") works. If you select any of the other options they do not work at all. There are 3 different "Results Details" select menus, and they should be shown/hidden based on the current value in the radio buttons. – cameron Sep 10 '15 at 14:19
  • @KAD Yeah, you are right. I actually didn't notice that. I thought the issue the OP had was due to not including jQuery as per the fiddle. – Ibanez Sep 10 '15 at 14:30