Geek asks and answers

The conditional form depending on the answers in the selected list does not work

I create a simple form in which the input fields are entered depending on the choice that the user makes in the selection list. I use a little javascript for this.

I make it work on one condition, but there are 2 conditions in the form.
The first is a drop-down menu in which, depending on one of the two answers, 2 input fields appear.
second is an input field that appears depending on one option selected in the selection 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 , my html code is usually longer, but it is interrupted all the time by the editor. I guess this is because it ran into a closing div? You can see the full code in jsfiddle

here is 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.net/4EmE5/2/

I hope you can help

+3
source share
2 answers

Cancel according to @Kevin Bowersox instructions with comments

Make the following changes to the 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

+3
source

The markup should be changed to add attributes idto each element selectto which you would like to add an event. This allows the code to recognize which selectevent handler should be attached to.

script. , select , . , show/hide, toggle, . , , , .

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

    <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.net/4EmE5/9/

+1

More articles:


All Articles