title: Bootstrap conditional form field fetch based on drop-down list value?
body: <p>I have a bootstrap form which I want to put some conditional fetching in. I have a drop down button in it which has two options and if the user selects any of the options, I want to show different fields based on the choice. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1 class="text-center"&gt;Setup a new crawler&lt;/h1&gt;
  
    &lt;form role="form" id="crawler-form" class="form-horizontal" action="/launch" method="POST"&gt;
       &lt;div class="form-group"&gt;
      &lt;label class="control-label col-sm-2" for="choice" &gt;Type of Crawling:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;button id="choice" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Crawling Type &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Historical Crawling&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Real-time Crawling&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group hidden"&gt;
          &lt;label class="control-label col-sm-2" for="cname"&gt;Name of Crawler:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" id="cname" name="name" placeholder="Enter crawler name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group hidden"&gt;
          &lt;label class="control-label col-sm-2" for="comment"&gt;Crawler Description:&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
            &lt;textarea class="form-control" rows="3" id="comment"
                name="description"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group hidden"&gt;
          &lt;label class="control-label col-sm-2" for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" id="keywords" name="keywords" placeholder="Enter keywords"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group hidden"&gt;
          &lt;label class="control-label col-sm-2" for="hashtags"&gt;Hashtags:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" id="hashtags" name="hashtags" placeholder="Enter hashtags"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group hidden"&gt;
          &lt;label class="control-label col-sm-2" for="datepicker"&gt;Date:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
        &lt;div class="input-daterange input-group" id="datepicker"&gt;
          &lt;input type="text" class="input-sm form-control" name="start" value="2016-04-01"/&gt;
          &lt;span class="input-group-addon glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
          &lt;span class="input-group-addon control-label"&gt;to&lt;/span&gt;
          &lt;input type="text" class="input-sm form-control" name="end" value="2016-04-25" /&gt;
          &lt;span class="input-group-addon glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group hidden"&gt;
        &lt;div class="col-sm-offset-6 col-sm-10"&gt;
            &lt;button type="submit" class="btn btn-default" value="Launch" &gt;Start Crawler&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>// Inputs value which determines the fields to revealed
  var choice = $('.dropdown-menu ul &gt; li &gt; a').text();
  
  // Wrappers for the all the conditional fields
  var name = $('#crawler-form input[name=name]').parent();
  var description = $('#crawler-form textarea[name=description]').parent();
  var keywords = $('#crawler-form input[name=keywords]').parent();
  var hashtags = $('#crawler-form input[name=hashtags]').parent();
  var start = $('#crawler-form input[name=start]').parent();
  var end = $('#crawler-form input[name=end]').parent();
  var all = name.add(description).add(keywords).add(hashtags).add(start).add(end);   //shortcut for all wrapper eliments
  
  var show-form = function(choice){
      all.addClass('hidden');
  
      if (choice == 'Historical Crawling'){
          name.removeClass('hidden');
          description.removeClass('hidden');
          keywords.removeClass('hidden');
          hashtags.removeClass('hidden');
          start.removeClass('hidden');
          end.removeClass('hidden');
      }
      else if (choice == 'Real-time Crawling'){
          name.removeClass('hidden');
          description.removeClass('hidden');
          keywords.removeClass('hidden');
          hashtags.removeClass('hidden'); 
      }
  
  
  };
  
  $(document).ready(init);
  
  var init = function(){
      show-form();
  };
  </code></pre>
  
  <p>Can someone help me to understand the problem? what is wrong with code? I have also created a fiddle. [Here] (<a href="https://jsfiddle.net/amitJS/hu303g9s/" rel="nofollow">https://jsfiddle.net/amitJS/hu303g9s/</a>)
  Thank you.</p>