title: How can i pass an active tab value in javascript search function?
body: <p>I'm currently creating a search function and i want to pass an extra parameter in search url based on active tab. </p>
  
  <p>By this time i can only pass selected values of dropdowns in each tab, but i can not pass the selected tab value.</p>
  
  <p>PS.: Dont mind the styling, it's ok in my site. The javascript is my main concern.</p>
  
  <p>Here's my HTML and Javascript code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#submit').on('click', function(search) {
    search.preventDefault();
    var url = 'http://www.example.com/?s=';
    var fields = new Array("size", "color");
    fields.forEach(function(f) {
      var v = $('#' + f).val();
      if (v != '0') {
        url = url + f + '[' + v + ']' + ',';
      }
    });
    window.location.href = url;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="row"&gt;
    &lt;ul id="tabs" class="nav nav-tabs htabs"&gt;
      &lt;li class="active"&gt;
        &lt;a href="#tshirt" id="tshirt" value="TSHIRT" data-toggle="tab"&gt;T-shirts&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="active"&gt;
        &lt;a href="#jacket" id="jacket" value="JACKET" data-toggle="tab"&gt;Jackets&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;div class="tabs-content"&gt;
    &lt;div class="tab-pane tab-content active" id="tshirt"&gt;
      &lt;div class="row"&gt;
        &lt;div class="xs-50 sm-50 md-33"&gt;
          &lt;select id="size" class="form-control"&gt;
            &lt;option value&gt;--Select size--&lt;/option&gt;
            &lt;option value="xl"&gt;XLarge&lt;/option&gt;
            &lt;option value="xxl"&gt;XXLarge&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
         &lt;div class="xs-50 sm-50 md-33"&gt;
          &lt;select id="color" class="form-control"&gt;
            &lt;option value&gt;--Select color--&lt;/option&gt;
            &lt;option value="red"&gt;Red&lt;/option&gt;
            &lt;option value="blue"&gt;Blue&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="button-group btn"&gt;
          &lt;input id="submit" class="btn" name="submit" value="Search" type="submit"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane tab-content active" id="jacket"&gt;
      &lt;div class="row"&gt;
        &lt;div class="xs-50 sm-50 md-33"&gt;
          &lt;select id="size" class="form-control"&gt;
            &lt;option value&gt;--Select size--&lt;/option&gt;
            &lt;option value="sm"&gt;Small&lt;/option&gt;
            &lt;option value="l"&gt;Large&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="xs-50 sm-50 md-33"&gt;
          &lt;select id="color" class="form-control"&gt;
            &lt;option value&gt;--Select color--&lt;/option&gt;
            &lt;option value="red"&gt;Red&lt;/option&gt;
            &lt;option value="blue"&gt;Blue&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="button-group btn"&gt;
          &lt;input id="submit" class="btn" name="submit" value="Search" type="submit"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>