Show/hide form fields based on radio button

Question

Is there a possible way that I can target two inputs at the same time?

I have two sets of radio buttons, where I want to hide input fields based on the combo selection.

How can I take the below code and combine both:

$('input[name=requestType]').click(function() {
                if(this.value == 'Team')

$('input[name=sessionType]').click(function() {
                    if(this.value == 'Remote Session')

I want to be able to select the Team radio button and the Remote Session button and hide/show inputs.

Here are the images:

Correct:
[![enter image description here][2]][2]

Correct:
[![enter image description here][3]][3]

Wrong:
[![enter image description here][4]][4]

Here is the code:

$(document).ready(function () {
    $('input[name=requestType]').click(function() {
        if(this.value == 'Team')
        {
            $(".total").show();
            $(".teamname").show();
            $(".one").show();
            $(".two").show();
            $(".three").show();
            $(".four").show();
            $(".five").show();
        }
        else
        {
            $(".teams").hide();
        }
    });

Answer 1

The following doesn't assume that the user has chosen the selects in a particular order, and will evaluate the fields to be shown regardless of the order they were selected.

I believe there are 3 combinations that you need to account for:

• (if) requestType == 'Team' && sessionType == 'Live Session'
• (elseif) requestType == 'Team'
• (else) requestType !== 'Team'

Try this and see if it works for you.

$(document).ready(function () {
    $('input[name=requestType]').click(function() {
         toggleTeamsFields();
    });

    $('input[name=sessionType]').click(function(){
         toggleTeamsFields();
    });
});

function toggleTeamsFields(){

    if($('input[name=requestType]').value == 'Team' && if($('input[name=sessionType]').value == 'Live Session'){

        $(".total").show();
        $(".teamname").show();
        $(".one").show();
        $(".two").show();
        $(".three").show();
        $(".four").show();
        $(".five").show();

    }elseif($('input[name=requestType]').value == 'Team'){

        $(".teams").hide();
        $(".teamname").show();

    }else{

        $(".teams").hide();

    } 
}

you could also use a case-switch statement to do the same but when my statements are no bigger than if/elseif/else I usually don't reach for the case-switch.

Answer 2

Here is a good approach you can try:

• Write a function which takes a radio button group and returns the value of the checked radio button
• Separate the event listener out to a function which looks at the checked value of each form group and shows/hides inputs accordingly
• Listen for the 'change' event instead of the 'click' event, so you can be sure that some radio button value has been updated instead of running your event listener when the user clicks a radio button that is already checked.

You should also save each input to a variable to avoid doing a global jQuery selector every time. The selector takes time to find the correct element, and if you change the selector in the future you don't have to search for everywhere you perform the jQuery lookup. It will also be helpful to store all of the inputs for quick mass showing/hiding.

The resulting code will look something like this:

// it is helpful to start each jQuery object variable name with a $ for clarity
var $container = $('.container'); // should probably add a more specific class to the container
var $requestTypeRadioBtns = $container.find('input[type="requestType"]');
var $sessionTypeRadioBtns = $container.find('input[type="sessionType"]');

var $requester = $container.find('.requester');
var $total = $container.find('.total');
var $teamName = $container.find('.teamname');
// etc...
var $teams = $container.find('.teams');

var $inputs = $([$requester, $total, $teamName, /* etc... */]);

function getRadioGroupValue($radioBtns) {
    // .find only looks through child elements, so use .filter which checks the current elements
    return $radioBtns.filter(':checked').val();
}

function radioGroupChangedListener() {
    var requestType = getRadioGroupValue($requestTypeRadioBtns);
    var sessionType = getRadioGroupValue($sessionTypeRadioBtns);

    $inputs.hide();

    if (requestType === 'Single User') {
        $requester.show();
    } else if (sessionType === 'Remote Session') {
        $requester.show();
        $teamName.show();
    } else {
        $inputs.show();
    }
}

$requestTypeRadioBtns.change(radioGroupChangedListener);
$sessionTypeRadioBtns.change(radioGroupChangedListener);

Edit: Forgot to include assigning the listener to each radio button group's change event.