Using Jquery to hide form elements based on selected dropdown option

Question

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.

Well the fiddle fails because you didn't include jQuery. jsfiddle.net/j08691/7wzUG/6. Otherwise, it works fine. — j08691
– j08691, Commented Jan 8, 2014 at 22:09
This question appears to be off-topic because the OP wasn't including jQuery. — j08691
– j08691, Commented Jan 8, 2014 at 22:11

Simon Steinberger · Accepted Answer · 2014-01-08 22:13:05Z

2

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/

answered Jan 8, 2014 at 22:13

Simon Steinberger

6,8565 gold badges63 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j08691 Over a year ago

"option:selected" isn't needed.

Edgar Villegas Alvarado · Accepted Answer · 2014-01-08 22:10:40Z

1

you just have to include jQuery

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

Cheers

answered Jan 8, 2014 at 22:10

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Comments

Yazeed · Accepted Answer · 2015-08-11 13:19:40Z

1

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.

answered Aug 11, 2015 at 13:19

Yazeed

344 bronze badges

1 Comment

NathonJones Over a year ago

Sorry to sound so dumb, but hiding a form field doesn't prevent it from being submitted. How do you toggle a field on/off and have it completely removed from the page so that it isn't submitted with the form?

Collectives™ on Stack Overflow

Using Jquery to hide form elements based on selected dropdown option

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related