i'm building a simple form where input fields are enabled depending on a choice a user makes in a select list. I'm using a little javascript for this.

I get it to work for one condition but there are 2 conditions within the form.
First is a select drop down where depending on one of the two answers 2 input fields appear.
The second is an input field that appears depending on one option chosen in a select list (namely "other")

here is the html:

<div class="form-div1">
<label>Select your profile</label>
<br>
<select>
    <option value="option1">I'm a first-time user</option>
    <option value="option2">I would like to renew or upgrade</option>
</select>

Sorry but my html code is normally longer but it keeps getting cut off by the editor. I assume it's because it encountered a closing div? You can see the full code in the jsfiddle

here is the js:

    $(document).ready(function () {

    $('.form-div2').show();
    $('.form-div3').show();
    $('.form-div4').show();
    $('.form-div42').hide();
    $('.form-div5').show();

    $('#select').change(function () {
        if ($('#select option:selected').text() == "I'm a first-time user") {
            $('.form-div2').show();
            $('.form-div3').show();
        } else if ($('#select option:selected').text() == "I would like to renew or upgrade") {
            $('.form-div2').hide();
            $('.form-div3').hide();
        }
    });

    $('#select').change(function () {
        if ($('#select option:selected').text() == "Other") {
            $('.form-div42').show();
        } else if ($('#select option:selected').text() !== "Other") {
            $('.form-div42').hide();
        }
    });
});

here is the fiddle: /

Hope you can help

i'm building a simple form where input fields are enabled depending on a choice a user makes in a select list. I'm using a little javascript for this.

I get it to work for one condition but there are 2 conditions within the form.
First is a select drop down where depending on one of the two answers 2 input fields appear.
The second is an input field that appears depending on one option chosen in a select list (namely "other")

here is the html:

<div class="form-div1">
<label>Select your profile</label>
<br>
<select>
    <option value="option1">I'm a first-time user</option>
    <option value="option2">I would like to renew or upgrade</option>
</select>

Sorry but my html code is normally longer but it keeps getting cut off by the editor. I assume it's because it encountered a closing div? You can see the full code in the jsfiddle

here is the js:

    $(document).ready(function () {

    $('.form-div2').show();
    $('.form-div3').show();
    $('.form-div4').show();
    $('.form-div42').hide();
    $('.form-div5').show();

    $('#select').change(function () {
        if ($('#select option:selected').text() == "I'm a first-time user") {
            $('.form-div2').show();
            $('.form-div3').show();
        } else if ($('#select option:selected').text() == "I would like to renew or upgrade") {
            $('.form-div2').hide();
            $('.form-div3').hide();
        }
    });

    $('#select').change(function () {
        if ($('#select option:selected').text() == "Other") {
            $('.form-div42').show();
        } else if ($('#select option:selected').text() !== "Other") {
            $('.form-div42').hide();
        }
    });
});

here is the fiddle: http://jsfiddle/4EmE5/2/

Hope you can help

• javascript
• jquery
• html

• The code gets cut of because your br and input tags aren't closed. you should use <br /> and <input /> – Jerodev Commented Feb 14, 2014 at 11:02

2 Answers 2

Reposting as per Master @Kevin Bowersox supporting ment

Do following changes to your code,

HTML,

<div class="form-div1">
    <label>Select your profile</label>
    <br />
    <select id='user'>
        <option value="option1">I'm a first-time user</option>
        <option value="option2">I would like to renew or upgrade</option>
    </select>
</div>
<div class="form-div2">
    <label>SEN</label>
    <br />
    <input type "text" name="input1" class="input1" />
</div>
<div class="form-div3">
    <label>Email Address</label>
    <br>
    <input type "text" name="input2" class="input2">
</div>
<div class="form-div4">
    <label>Select your product</label>
    <br>
    <select id='product'>
        <option value="option1">Product1</option>
        <option value="option2">Other</option>
    </select>
</div>
<div class="form-div42">
    <label>Specify your product</label>
    <br>
    <input type "text" name="input2" class="input2">
</div>
<div class="form-div5">
    <label>Select your license</label>
    <br />
    <select>
        <option value="option1">25 users</option>
        <option value="option2">50 users</option>
    </select>
</div>

JS:

$('.form-div2, .form-div3, .form-div4, .form-div5').show();
$('.form-div42').hide();

$('#user').change(function () {
    var selected = $('#user option:selected').text();
    $('.form-div2, .form-div3').toggle(selected == "I'm a first-time user");
});

$('#product').change(function () {
    var selected = $('#product option:selected').text();
    $('.form-div42').toggle(selected == "Other");

});

DEMO

The markup should be changed to add id attributes to each select element you would like to attach an event to. This allows the code to discern which select the appropriate event handler should be attached to.

I have introduced several improvements to the script. For instance, instead of paring the text of the selected option, simply retrieve the value of the select and pare it to the appropriate value associated with the text. Also, since these elements are simply in an show/hide state you can pass a boolean expression to toggle to conditionally toggle the visibility of the corresponding elements. Notice the selector can select multiple elements by providing a ma separated list of selectors.

Javascript

$(document).ready(function () {

    $('.form-div2, .form-div3, .form-div4, .form-div5').show();
    $('.form-div42').hide();

    $('#user-type').change(function () {
        $('.form-div2, .form-div3').toggle($(this).val() == "option1");
    });

    $('#product').change(function () {
        $('.form-div42').toggle($(this).val() == "option2");
    });
});

HTML Changes

    <select id="user-type">
        <option value="option1">I'm a first-time user</option>
        <option value="option2">I would like to renew or upgrade</option>
    </select>

    <select id="product">
        <option value="option1">Product1</option>
        <option value="option2">Other</option>
    </select>

JS Fiddle: http://jsfiddle/4EmE5/9/