title: show a textbox based on the selected option using jquery
body: <p>I have a html form that includes droplist and textarea. What I need is to show the textarea  when the user selects an option from the droplist.</p>
  
  <p>I already write the HTML code and the function for jQuery but the textarea doesn't show at all.</p>
  
  <p>Where is the error in my code? 
  I will appreciate any help.</p>
  
  <h1>code:</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Form Validation&lt;/title&gt;
      &lt;!-- Latest compiled and minified BootStarp CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;!-- jQuery library --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $(function (){
          $("#droplistID").change(function(){
          $("#textarea").hide();
          $("#" + $(this).val()).show();
      });
      &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="page-wrapper" &gt;
        &lt;div class="container" &gt;
          &lt;h1&gt;
            Send Post Data to AJAX
          &lt;/h1&gt;
          &lt;form name="myForm" class="form-horizontal" id ="myform" action="#" 
                  onsubmit="return submitForm();" method="POST" enctype="multipart/form-datam"&gt;
            &lt;div class="panel panel-info"&gt;
              &lt;div class="panel-heading"&gt;Form&lt;/div&gt;
              &lt;div class="panel-body"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label for="name" class="col-md-4"&gt;Date *&lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                          &lt;input type="text" class="form-control" id="name" name="name"
                                  placeholder="Enter Name" required/&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group" &gt;
                        &lt;label for="Title" class="col-md-4"&gt;Title *&lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                          &lt;input type="text" class="form-control"  id="mobile" name="phone"
                                   placeholder="Enter the Title" required/&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group  "&gt;
                        &lt;label for="category" class="col-md-4"&gt;select Category *&lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                         &lt;select name = "droplist" id="droplistID" onChange="popupTextBox()"&gt;
                             &lt;option id = "option1" value="select" selected&gt;Select&lt;/option&gt;
                             &lt;option id = "option2" value="category 1"&gt;category 1&lt;/option&gt;
                             &lt;option id = "option3" value="category 2"&gt;category 2&lt;/option&gt;
                             &lt;option id = "option4" value="category 3"&gt;category 3&lt;/option&gt;
                         &lt;/select&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div id = "textarea"&gt;
                        &lt;div class="form-group  "&gt;
                           &lt;label for ="text" class="col-md-4" &gt;Enter a text &lt;/label&gt;
                          &lt;div class="col-md-6"&gt;
                             &lt;textarea cols= "60" rows= "30"&gt; &lt;/textarea&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;                      
                      &lt;/div&gt;
  
                      &lt;div class="form-group  "&gt;
                        &lt;label for="image" class="col-md-4"&gt;Select Image &lt;/label&gt;
                        &lt;div class="col-md-6"&gt;
                          &lt;input type="file" class="form-control" name="image" &gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;"&gt;
              &lt;center&gt;
                &lt;input type="submit" class="btn btn-primary" value="Submit" /&gt;
              &lt;/center&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>