CODEWITHSUNDEEP
javascriptjquery
Mark Alan
Mark Alan

Reputation: 455

get the class and check which div has active class

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

Upvotes: 1

Views: 1364

Answers (2)

Tariq Javed
Tariq Javed

Reputation: 481

$(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="" />

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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="" />

Upvotes: 3

Related Questions