CODEWITHSUNDEEP
javascriptjqueryhtmljsp
user3673449
user3673449

Reputation: 357

Show and hide html element on selected option change

In a JSP page, I have a dropdown list. When the first element of the list is selected, I want a text area to show right on click. I'm new to Javascript/Jquery, so I'm obviously missing something in the function (the text area never shows up). Hope someone can help.

This is the HTML:

<tr class="odd gradeX">
    <td class="col-lg-3">
        <div>
            <label>Show text area</label>
            <select id="show" class="form-control" name="show_text_area" onchange="change()">
                <option value="1">YES</option>
                <option value="0">NO</option>
            </select>

        </div>
    </td>
    <td class="col-lg-3">
        <div>
            <label>Text area</label>
            <textarea id="text_area" class="form-control" type="text" name="text_area" placeholder="Write something" rows="5" cols="50" style="display: none"></textarea>
        </div>
    </td>
</tr>

This is the function, on top of the JSP:

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");
    if(selected === '1'){
        textarea.show();
    }
    else{
        textarea.hide();
    }
});</script>

Upvotes: 8

Views: 57231

Answers (10)

Praveen
Praveen

Reputation: 86

Try this code:

// This will create an event listener for the change action on the element with ID 'show'
$('#show').change(function() {

     // If checkbox is 'checked'
    if($(this).is(':checked')) {
        // show the element that has the id 'txt_area' 
        $('#text_area').show();
    } else {
        // hide it when not checked
        $('#text_area').hide();
    }
});

Upvotes: 1

Yaman
Yaman

Reputation: 1061

You can use jQuery as following

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;

    if(selected === '1'){
        $('#text_area').show();
    }
    else{
        $('#text_area').hide();
    }
}</script>

Upvotes: 4

anurag
anurag

Reputation: 2246

  1. Use jQuery.

  2. Remove onchange="change()" function from 

    <select id="show" class="form-control" name="show_text_area" onchange="change()">

  3. Look for change event, on your select element.

    $('#show').on('change', function () {
   var optionSelected = $("option:selected", this);
   var valueSelected = this.value;
   if(valueSelected == 1){
       $("#text_area").show();
   } else {
       $("#text_area").hide();
   }
});

Fiddle

Upvotes: 2

Rawat Raman
Rawat Raman

Reputation: 479

You are getting the html element by document.getElementById that returns normal javascript object. Jquery methods hide() and show() are available for jquery objects only.

But whatever you want to achieve can be achieved by simple Javascript, just made some simple changes.

instead of show() and hide() use respectively textarea.style.display = "block" and textarea.style.display = "none";

and remove the ); in the end of your code.

use the fiddle link for working example. fiddle link

Upvotes: 0

alvery
alvery

Reputation: 1983

You have mistake at the end of your function - remove the last );

Finally it should be:

<select id="show" class="form-control" name="show_text_area" onchange="change(this)">


function change(obj) {


    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");

    if(selected === '1'){
        textarea.style.display = "block";
    }
    else{
        textarea.style.display = "none";
    }
}

Upvotes: 10

swapnil patil
swapnil patil

Reputation: 31

you can do this in jQuery.....like " $(document).ready(function(){

var seletVal=$('#show option:selected').val();
if(selectVal=='1')
$('#textareaId').show();
else
$('#textareaId').hide();
});

"

Upvotes: 0

A Beginner
A Beginner

Reputation: 447

var drpVal=  $('#show').val();
if( drpVal == "1")
{
     $('#text_area').show(); 
          // or u can use
       $("#text_area").css("display", "");
 }
 else{
  $('#text_area').hide(); 
          // or u can use
       $("#text_area").css("display", "none");
 }

Upvotes: 0

degr
degr

Reputation: 1565

Your function is correct, but js Element class have no show() and hide() methods. You can implement it using prototype. As an example

Element.prototype.hide(){
this.style.display = "hidden";
} 
Element.prototype.show(style){
style = style ? style : "block";
this.style.display = style;
}

But better use jquery or something like this.

Upvotes: -1

Sadikhasan
Sadikhasan

Reputation: 18600

You can do also using jQuery as follows.

$("#show").change(function(){
   if($(this).val()=="1")
   {    
       $("#text_area").show();
   }
   else
   {
       $("#text_area").hide();
   }
});

Demo

Upvotes: 0

Mitul Maheshwari
Mitul Maheshwari

Reputation: 2647

you can use jquery also.

$('#show').val();
   if( $('#show').val() == "1")
    {
         $('#text_area').show(); 
              OR
           $("#text_area").css("visibility", "visible");
   }else
   {
      $('#text_area').hide(); 
              OR
           $("#text_area").css("visibility", "hidden");
  }

Upvotes: 1

Related Questions