get the class and check which div has active class

Question

I have bootstrap tabs and I wanted to change the form value according to which tabs is active is it possible to do so using jquery here is my javascript

 $(document).ready(function() { $('.tab').click(function() { var value_ch = $('.tabe-pane.active').attr('id'); $('#valuechange').val(value_ch); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li> <li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li> </ul> <div class="tab-content"> <div id="ma" class="tab-pane fade in active"> <h3>First Value</h3> </div> <div id="otc" class="tab-pane fade"> <h3>Second tab</h3> </div> </div> <input type="text" id="valuechange" value="" /> 

Can any one help me out as of when i CLICK THE VALUE of the input field is not changing

Answer 1

There is a few things wrong.

• You use id="ma" 2 times, I removed from the one from li a
• You use $('.tab') but nothing have the class tab
• You have $('.tabe-pane.active') but should be $('.tab-pane.active')

 $(document).ready(function() { $('a[data-toggle="tab"]').click(function() { var value_ch = $($(this).attr("href")).attr("id") // $('.tab-pane.active').attr('id'); $('#valuechange').val(value_ch); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#ma"><i class="fa fa-mobile"></i> Home</a></li> <li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li> </ul> <div class="tab-content"> <div id="ma" class="tab-pane fade in active"> <h3>First Value</h3> </div> <div id="otc" class="tab-pane fade"> <h3>Second tab</h3> </div> </div> <input type="text" id="valuechange" value="" /> 

Answer 2

$(document).ready(function() {
  $('a[data-toggle="tab"]').click(function() {
    var value_ch = $('this').attr('href');
    $('#valuechange').val(value_ch);
  });
});

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
  <li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>

<div class="tab-content">
  <div id="ma" class="tab-pane fade in active">
    <h3>First Value</h3>
  </div>

  <div id="otc" class="tab-pane fade">
    <h3>Second tab</h3>
  </div>
</div>

<input type="text" id="valuechange" value="" />