CODEWITHSUNDEEP
javascriptjqueryformsshow-hide
user1573524
user1573524

Reputation: 63

Using Jquery to hide form elements based on selected dropdown option

I have a form that has a dropdown menu, a few text fields and a text area. I would like the form to hide the text area if one of the options from the dropdown menu is selected.

Here is my code:

<form id="contact" name="contact" action="" method="post">
<select name='select-question'>
    <option value="member-request">Become a member</option>
    <option value="question">Send us your questions / comments</option>
</select>
Name:
<input type="text" name="last-name"></input>
Comments/questions:</br>
<textarea id="comments" name="questions-field" rows="5" cols="27"></textarea>
<br />
<input type="submit" name="submit" value="Submit"></input>


$(document).ready(function () {
    $('#contact select[name="select-question"]').change(function () {
        if ($('#contact select[name="select-question"]').val() == 'question') {
            $('#comments').show();
        } else {
            $('#comments').hide();
        }
    });
});

I have also posted to JS fiddle: http://jsfiddle.net/7wzUG/5/

I'm very new to JQuery, and I am not sure why this does not work. Thanks for any help.

Upvotes: 1

Views: 5536

Answers (3)

Yazeed
Yazeed

Reputation: 34

Here is the same code that Simon Steinberger & Edgar Villegas Alvarado but with the ternary operator

http://jsfiddle.net/4uj2fhoh/

$(document).ready(function () {
    $('#contact select[name="select-question"]').change(function () {
        $('#contact select[name="select-question"]').val() == 'question' ? $('#comments').show() : $('#comments').hide()
    });
});

As others said, add JQuery.

What you could, also, do is add a class that will hide the comments text area, and then toggle it on/off based on dropdown selection.

Upvotes: 1

Simon Steinberger
Simon Steinberger

Reputation: 6825

Include jQuery AND add "option:selected" to your selector:

$(document).ready(function () {
    $('#contact select[name="select-question"]').change(function () {
        if ($('#contact select[name="select-question"] option:selected').val() == 'question') {
            $('#comments').show();
        } else {
            $('#comments').hide();
        }
    });
});

You also need to hide the comments on load via CSS style and place the label inside the comments div container, so that also the label is invisible when appropriate.

Here's the working fiddle: http://jsfiddle.net/7wzUG/9/

Upvotes: 2

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

you just have to include jQuery

Here's the corrected one: http://jsfiddle.net/edgarinvillegas/7wzUG/7/

Cheers

Upvotes: 1

Related Questions