CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jpgerb
jpgerb

Reputation: 1120

Hide all but 1 dif on document ready and unhide divs after "change"

I am creating a business options form (rough description I know, but here goes). I want the first select that pops up to be to choose an Entity Type (IE: Corporation, LLC, LLP, etc). Once one of these is chosen, I want to .show() the next form. Here is what I've tried so far:

HTML FILE

<head>
    <link rel="stylesheet" type="text/css" href="hide.css">
    <script src="//code.jquery.com/jquery-1.10.2.js">
        function getEntityType(sel) {
            var openingEntityType = sel.value;
            $("#basicOpeningEntityInformation").show();
        }
    </script>
</head>

<body>
    <select id="oet" onchange="getEntityType(this)">
        <option value="">Select an Option</option>
        <option value="inc">Corporation</option>
        <option value="llc">Limited Liability Company</option>
        <option value="llp">Limited Liability Partnership</option>
        <option value="lp">Limited Partnership</option>
        <option value="gp">General Partnership</option>
        <option value="jv">Joint Venture</option>
        <option value="dba">Sole Proprietorship</option>
    </select>
    <br/>
    <br/>
    <form id="basicOpeningEntityInformation">
        Entity Name:
        <input type="text" id="openingEntityName">
        <br/>
    </form>
</body>

CSS FILE:

#basicOpeningEntityInformation {
    display: none;
}

When the page loads, #basicOpeningEntityInformation is hidden. I want it to be unhide when a select from above is chosen. I tested my console and the select is passing it's value to var openingEntityType as it should; however, it is not making the other form visible. I tired with both .basicOpeningEntityInformation and #basicOpeningEntityInformation and neither seem to work (both in the CSS and the Script.

Thank you!

Upvotes: 0

Views: 68

Answers (3)

Pradeep
Pradeep

Reputation: 74

Try adding this..it will work

<head>
    <link rel="stylesheet" type="text/css" href="hide.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"> </script>
	<script>
        function getEntityType(sel) {
            var openingEntityType = sel.value;
            jQuery("#basicOpeningEntityInformation").show();
        }
    </script>
</head>

Upvotes: 0

Pradeep
Pradeep

Reputation: 74

you are using $(".basicOpeningEntityInformation").show();

so change the

id="basicOpeningEntityInformation" to class="basicOpeningEntityInformation"

OR

$(".basicOpeningEntityInformation").show(); to $("#basicOpeningEntityInformation").show();

Upvotes: -1

Tushar
Tushar

Reputation: 87203

You need to check if the selected value is one of the required values:

$('#oet').on('change', function() {
    var selectedItem = $(this).val();
    if (selectedItem == 'inc' || selectedItem == 'llc' || selectedItem == 'llp') {
        $('#basicOpeningEntityInformation').show();
    } else {
        $('#basicOpeningEntityInformation').hide();
    }
});

Demo: https://jsfiddle.net/tusharj/L4b0wpts/1/

Upvotes: 2

Related Questions