CODEWITHSUNDEEP
jqueryformsselecthideshow
Patrioticcow
Patrioticcow

Reputation: 27048

how to show/hide textarea based on select in jquery?

i have a select field and a textarea one. And i am trying to hide/show the textarea in function of the select type i make:

<select id="select" name="management">
    <option value="0" selected="">Select One</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>
<textarea id="textarea" name="searching_gig_des" wrap="VIRTUAL" cols="50" rows="5"></textarea>
​
var textarea = $('textarea');.
var select   = $('#select').val();

textarea.hide();

if (select == '1'){
  textarea.show();
}
if (select == '0'){
  textarea.hide();
}
​

or jsfiddle

any ideas?

thanks

Upvotes: 1

Views: 13561

Answers (7)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Remove the . from var textarea = $('textarea');. and you are good to go.

Btw, I presume that you are trying to show/hide textarea based on the drop down value onload of the page.

You need to change handler like below if you want to show/hide textarea based on dropdown selection,

var $select = $('#select');

$select.change(function() {
    var select = $(this).val();
    if (select == '1') {
        textarea.show();
    }
    if (select == '0') {
        textarea.hide();
    }
});

Upvotes: 1

switz
switz

Reputation: 25188

Try:

var textarea = $('textarea');
$('#select').change(function() {
    if ($(".yes:selected").val() == 1) {
        textarea.show();
    }
    else {
        textarea.hide();
    }
});​

http://jsfiddle.net/uMTmm/1/

Upvotes: 1

David Thomas
David Thomas

Reputation: 253338

First remove the period (.) from after the semi-colon on the first var line. Then wrap the if into a change() event-handler, and make the second if an else if*:

var textarea = $('#textarea');
var select   = $('#select').val();

textarea.hide();

$(select).change(
    function(){
        if (select == 1){
          textarea.show();
        }
        else if (select == 0){
          textarea.hide();
        }
    });

JS Fiddle update.

  • This isn't, strictly, necessary. But it does make more sense to me, since the two conditions are related. On the other hand, it could also be just an else (rather than else if, since there's only really two options).

Upvotes: 1

Gabe
Gabe

Reputation: 50493

You have a few syntax errors, plus you're not binding the change event for the select

$('#select').change(function(){

        var textarea = $('textarea');
        var select   = $(this).val();

        textarea.hide();

        if (select == '1'){
          textarea.show();
        }
        if (select == '0'){
          textarea.hide();
        }
});​

jsfiddle

Upvotes: 3

DG3
DG3

Reputation: 5298

You have some errors in your jquery code. Also you need to handle change event for your select. Here is the updated jsfiddle http://jsfiddle.net/uhv5R/6/

Upvotes: 1

Justice Erolin
Justice Erolin

Reputation: 2879

http://jsfiddle.net/uhv5R/5/

Bind the JS to the change event, and you had an extra period in there as well.

Upvotes: 1

Alex
Alex

Reputation: 35407

$('#select').change(function(){
    var value = $(this).val();
    var textarea = $('textarea');

    if (value == '1'){
        textarea.show();
    }
    if (value == '0'){
        textarea.hide();
    }

});

Upvotes: 2

Related Questions