onChange for hidden Test

by rulokc

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<ul class="tabs">
  <li><a href="#a-tab">A</a></li>
  <li><a href="#b-tab">B</a></li>
</ul>
<p class="tab a-tab">
  A<input type="text" class="a">
</p>
<p class="tab b-tab">
  B<input type="text" class="b">
</p>

CSS

.tabs > li {
  display: inline-block;
}
.tab {
  display: none;
}
.tab.active {
  display: block;
}

JavaScript

$('.tabs a').on('click', function(e) {
	e.preventDefault();
  var tabName = $(this).attr('href').replace('#', '');
  var $tab = $('.tab.' + tabName);
  $('.tab.active').removeClass('active');
  $tab.addClass('active');
});

$('.b').on('change', function(e) {
	$('.a').val(e.target.value);
});

$('.a').on('keyup', function(e) {
	$('.b').val(e.target.value);
});