Change forms displayed on change of value of drop down

Question

I have this HTML form and jQuery script:

 $(document).ready(function() { $('#accounttype').on('change', function() { if (this.value == '1') { $("#corporate").show(); } else if (this.value == '0') { $("#individual").show(); } else { $("#corporate").hide(); $("#individual").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-body"> <form role="form"> <div class="form-group row"> <label class="col-md-5 control-label">Customer Account ID:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="ACT-2015-000011" disabled> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Customer Account Type:</label> <div class="col-md-7"> <select id='accounttype' class="form-control"> <option value="0">Individual</option> <option value="1">Corporate</option> </select> </div> </div> <div id='corporate' class="form-group row"> <label class="col-md-5 control-label">Customer Account Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="5SOS"> </div> </div> <div id='individual' class="form-group row"> <label class="col-md-5 control-label">Customer ID:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="CST-2015-000011"> </div> </div> <div id='individual' class="form-group row"> <label class="col-md-5 control-label">Customer First Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Luke"> </div> </div> <div id='individual' class="form-group row"> <label class="col-md-5 control-label">Customer Middle Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Robert"> </div> </div> <div id='individual' class="form-group row"> <label class="col-md-5 control-label">Customer Last Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Hemmings"> </div> </div> <div id='individual' class="form-group row"> <label class="col-md-5 control-label">Gender:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Male"> </div> </div> <div id='individual' class="form-group row"> <label class="col-md-5 control-label">Birthday:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="01/01/01"> </div> </div> <div class="col-md-offset-9"> <a href="cis.html" type="button" class="btn btn-primary">Create/Enroll</a> </div> </form> </div> 

What I need to do is to display the forms according to the value selected in the dropdown using onchange but It doesn't seem to be working. Can someone point out what's wrong? Thanks!

Answer 1

Your Javascript code is not correct... First remove semi colons from the if statement then use the Javascript below.

Also your HTML code should be reformatted as below.

The id individual is now tied to one parent div which covers the div's for the individual data instead of having multiple divs with the same id.

 $(document).ready(function() { $("#corporate").hide(); $("#individual").hide(); $('#accounttype').on('change', function() { if (this.value == '1') { $("#individual").hide(); $("#corporate").show(); } else if (this.value == '0') { $("#corporate").hide(); $("#individual").show(); } else { $("#corporate").hide(); $("#individual").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-body"> <form role="form"> <div class="form-group row"> <label class="col-md-5 control-label">Customer Account ID:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="ACT-2015-000011" disabled> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Customer Account Type:</label> <div class="col-md-7"> <select id='accounttype' class="form-control"> <option value="">Select account type...</option> <option value="0">Individual</option> <option value="1">Corporate</option> </select> </div> </div> <div id='corporate' class="form-group row"> <label class="col-md-5 control-label">Customer Account Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="5SOS"> </div> </div> <div id='individual'> <div class="form-group row"> <label class="col-md-5 control-label">Customer ID:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="CST-2015-000011"> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Customer First Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Luke"> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Customer Middle Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Robert"> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Customer Last Name:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Hemmings"> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Gender:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="Male"> </div> </div> <div class="form-group row"> <label class="col-md-5 control-label">Birthday:</label> <div class="col-md-7"> <input class="form-control" type="text" placeholder="01/01/01"> </div> </div> </div> <div class="col-md-offset-9"> <a href="cis.html" type="button" class="btn btn-primary">Create/Enroll</a> </div> </form> </div> 

Answer 2

<div class="panel-body">
<form role="form">
    <div class="form-group row">
        <label class="col-md-5 control-label">Customer Account ID:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-5 control-label">Customer Account Type:</label>
        <div class="col-md-7">
            <select id='accounttype' class="form-control">
                <option value="0">Individual</option>
                <option value="1">Corporate</option>
            </select>
        </div>
    </div>                        
    <div class="form-group row corporate">
        <label class="col-md-5 control-label">Customer Account Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="5SOS">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer ID:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="CST-2015-000011">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer First Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Luke">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer Middle Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Robert">

        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Customer Last Name:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Hemmings">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Gender:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="Male">
        </div>
    </div>
    <div class="form-group row individual">
        <label class="col-md-5 control-label">Birthday:</label>
        <div class="col-md-7">
            <input class="form-control" type="text" placeholder="01/01/01">
        </div>
    </div>
    <div class="col-md-offset-9">
        <a href="cis.html" type="button" class="btn btn-primary">Create/Enroll</a>
    </div>
</form>
<script src="../resources/scripts/jquery2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".corporate").hide();
        $(".individual").hide();
        $("#accounttype").change(function () {
            if ($(this).val() == 1) {
                $(".corporate").show();
                $(".individual").hide();
            } else if ($(this).val() == 0) {
                $(".individual").show();
                $(".corporate").hide();
            } else {
                $(".corporate").hide();
                $(".individual").hide();
            }
        });
    });
</script>

Please try above code, hope this will help you, Note:- there must be a unique id for each html element, for multiple you can use clsss please don't forget to add jquery library above the js code