Show and hide input fields using 4 radio buttons using HTML and Javascript

Question

I am a complete beginner with Javascript.

I have 4 radio buttons:

1. House
2. Flat / Apartment
3. Bungalow
4. Commercial

And 2 input fields:

1. Rooms:
2. Bedrooms:

on click of House, Flat, Bungalow, I want to hide Rooms and show the input field Bedrooms on click of commercial I want to hide Bedrooms and show Rooms.

Please see my code below:

HTML CODE:

<table id="CurrentProperty">
    <tr>
        <td colspan="3">
            <label>Type of Property:</label>
            <br/>
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
            <input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
    </tr>
    <tr class="showCta">
        <td colspan="3">
            <label>Rooms:</label>
            <input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
        </td>
    </tr>
    <tr class="showTr">
        <td colspan="3">
            <label>Bedrooms:</label>
            <input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
        </td>
    </tr>
</table>

JAVASCRIPT:

$(window).load(function () {
    $('#showBedrooms').on('click', function () {
        $('.showCta').hide();
    });
});

$(window).load(function () {
    $('#showRooms').on('click', function () {
        $('.showCta').show();
    });
});

Answer 1

JS should be something like

function update (el) {
    var $rooms = $('tr.showCta');
    var $bedrooms = $('tr.showTr');

    if (el.checked && el.value === 'bedrooms') {
        $rooms.hide();
        $bedrooms.show();
    } else {
        $rooms.show();
        $bedrooms.hide();
    }
}

$(function () {
    //get initial state.
    update($('input:checked')[0]);
    $('input[name="fromType"]').change(function () {
        update(this);
    });
});

jsFiddle http://jsfiddle.net/bj4Lx7ms/

Answer 2

in your case, user change from jquery. Bind an event handler to the "change" JavaScript event, or trigger that event on an element (your radiobuttons). With $(this).val() you can get the value from the value attribute, to check is the value bedrooms. Then call the methode show or hide like in this example:

$(document).ready(function () {
    $('input:radio[name="fromType"]').change(function(){
        if($(this).val() == 'bedrooms'){
           $('.showCta').hide();
           $('.showTr').show();
        }else if ($(this).val() == 'rooms'){
            $('.showCta').show();
            $('.showTr').hide();
        }
    });
});

And hide the showCta tr as default with:

<tr class="showCta" style="display:none">

Here my JsFiddle-example

Answer 3

JAVASCRIPT:

$( document ).ready(function () {
    $('#showBedrooms').on('click', function () {
        $('.showCta').hide();
    });
    $('#showRooms').on('click', function () {
        $('.showCta').show();
    });
});

After the document loaded and set the onclick handlder

And I think you should set

<tr class="showCta"> 

to

<tr class="showCta" style="display:none;">

Answer 4

 $(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */ function hideRooms() { $("#rooms").hide(0); $("#bedrooms").fadeIn(250); } function hideBedrooms() { $("#bedrooms").hide(0); $("#rooms").fadeIn(250); } $("#label").text("House selected"); hideRooms(); /* Hidding at start of website */ $("#showBedrooms_house").change(function() { $("#label").text("House selected"); if (this.checked) { hideRooms(); } }); $("#showBedrooms_flatAppart").change(function() { $("#label").text("Flat / Appartment selecrted"); if (this.checked) { hideRooms(); } }); $("#showBedrooms_bungalow").change(function() { $("#label").text("Bungalow selected"); if (this.checked) { hideRooms(); } }); $("#showRooms_commercial").change(function() { $("#label").text("Commercial selected"); if (this.checked) { hideBedrooms(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="CurrentProperty"> <tr> <td colspan="3"> <label>Type of Property:</label> <br/> <input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House <input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment <input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow <input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td> </tr> <tr class="showCta" id = "rooms"> <td colspan="3"> <label>Rooms:</label> <input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" /> </td> </tr> <tr class="showTr" id = "bedrooms"> <td colspan="3"> <label>Bedrooms:</label> <input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" /> </td> </tr> <tr> <td style ="color : blue"> <label id ="label"></label> </td> </tr> </table>