Rectangle 27 0

javascript Hide show toggle fields in html through JS?


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <select id="testType">
    <option value = "" selected disabled>Select mode</option>
    <option value = "online">Online</option>
    <option value = "offline">Offline</option>
    </select>
    <hr/>
    <br/>
    <div id="online" style="display:none;">I am online part</div>
    <br/>
    <div id="offline" style="display:none;">I am offline part</div>
    <br/>



    <script>
    $(document).ready(function () {
        $("#testType").change(toggleFields);
    });
    function toggleFields() {
        if ($("#testType").val() == "online")
        {
            $("#offline").hide();
            $("#online").show();
        }
        else
        {
            $("#online").hide();
            $("#offline").show();
        }
    }
    </script>
$("#testType").change(toggleFields);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="testType">
<option value = "" selected disabled>Select mode</option>
<option value = "online">Online</option>
<option value = "offline">Offline</option>
</select>
<hr/>
<br/>
<div id="online" style="display:none;">I am online part</div>
<br/>
<div id="offline" style="display:none;">I am offline part</div>
<br/>



<script>
$(document).ready(function () {
    $("#testType").change(function () {
        toggleFields();
    });

});
function toggleFields() {
    if ($("#testType").val() == "online")
    {
        $("#offline").hide();
        $("#online").show();
    }
    else
    {
        $("#online").hide();
        $("#offline").show();
    }
}
</script>

A simpler example can be:

As suggested by @Scott Marcus You can simply set the callback function as:

In the beginning keep nothing selected and then when online is selected show the online div while hiding the offline and when the offline is selected show offline and hide online part.

There is no need to wrap toggleFields() in an anonymous function that is being registered as the callback for the change event of the dropdown. Also, it is not a good idea to have a basic else condition for the if as this won't scale well.

This would be a more efficient approach.

What you can do is Place your online part of code in a div let us say with id as online and offline part in a div with id as offline.

and need not wrap it as an anonymous function.

Note
Rectangle 27 0

javascript Hide show toggle fields in html through JS?


$(function () {
    $("#age").on("change", toggleFields);
});

function toggleFields() {
    switch (parseInt($("#age").val())) {
      case 13:
        $(".group1").show();
        $(".group2").hide();
        break;
      case 14:
        $(".group2").show();
        $(".group1").hide();
        break;
    }
}
.group1, .group2 {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div class="col-lg-3">
        <div class="control-group">
            <label class="control-label" for="select01">Mode of Test:</label>
                <div class="controls">
                    <select id="age" name="age" class="form-control">
                        <option value=''> - Select - </option>
                        <option value="14">Online</option>            
                        <option value="13">Written</option>                                 
                    </select>
                </div>
            </div>
        </div>
        <div class="control-group group1" id="parentPermission">
            <label class="control-label" for="organization" >Venue :</label>
            <div class="controls">
                <input type="text" class="form-control input-xlarge" id="txtPassportNumber" name="parent_name">                  
            </div>
        </div>                              
        <div class="control-group group2" id="Permission">
            <label class="control-label" for="organization">Test Link :</label>
            <div class="controls">
                <input type="text" class="form-control input-xlarge" id="organization" name="organization">                  
            </div>
        </div>  
        <div class="control-group group2" id="Permission" style="">
            <label class="control-label" for="organization">Upload Guide Line Document & Instruction Message :</label>
            <div class="controls">
                <input type="text" class="form-control input-xlarge" id="organization" name="organization">  
                <input type="file" name="img" multiple>
            </div>
        </div>  
</form>

Also, in hooking up the toggleFields event handler, your code wraps the call in an anonymous function, which is not necessary. You also are calling toggleFields as soon as the document is ready, which also isn't needed since all the fields will be hidden by default.

What I've done here is just added group1 and group2 classes to the two different sections and then show and hide them accordingly. Initially (via CSS), both sections are set to be hidden.

You need to show and hide the correct sections not just hide. Also, you have multiple elements with the id of Permission which isn't correct.

Note