Копирование ввода с активной вкладки на вкладку другой вкладки с таким же именем - Bootstrap

Question

У меня есть поле ввода на одной вкладке и другое поле ввода с тем же именем на другой вкладке. Как я могу повторить введенное значение на одной вкладке другой? (Я использую Bootstrap)

Чтобы повторить введенные значения, я использую следующий код, но я не знаю, как загружать значения из активной вкладки в другую.

Нажмите для демо:DEMO

Код:

$('input, textarea').keyup(function() { 
    $('[name="' + $(this).attr('name') + '"]').val($(this).val()); 
}); 

У меня есть три вкладки:

<div role="tabpanel"> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home"><br> 
     <label for="fi">First input</label> 
     <input class="form-control" type="text" id='fi' name="first_input"> 

     <label for="si">Second input</label> 
     <input class="form-control" type="text" id='si' name="second_input"> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="profile"><br> 
     <label for="fi">First input</label> 
     <input class="form-control" type="text" id='fi' name="first_input"> 

     <label for="si">Second input</label> 
     <input class="form-control" type="text" id='si' name="second_input"> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="messages"><br> 
     <label for="fi">First input</label> 
     <input class="form-control" type="text" id='fi' name="first_input"> 

     <label for="si">Second input</label> 
     <input class="form-control" type="text" id='si' name="second_input"> 
    </div> 
    </div> 

</div> 

и JS для показа вкладок URL для примера index.html # профиля :

$(document).ready(function() { 
    var hash = window.location.hash; 
    $('.nav-tabs a[href="' + hash + '"]').tab('show'); 
}); 

Answer 1

Проблема в том, что вы используете те же идентификаторы (si и fi) несколько раз, и они должны быть уникальными. Вы должны либо изменить значения идентификатора на уникальные имена, либо использовать классы, потому что одно и то же имя класса может использоваться несколько раз.

В этом случае я бы использовал разные идентификаторы, потому что у вас есть тег label for, а for ссылается на элемент ID, а не на класс. (source)

Fixed HTML код (fiddle) с использованием различных идентификаторов:

<div role="tabpanel"> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home"><br> 
     <label for="fi_home">First input</label> 
     <input class="form-control" type="text" id='fi_home' name="first_input"> 

     <label for="si_home">Second input</label> 
     <input class="form-control" type="text" id='si_home' name="second_input"> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="profile"><br> 
     <label for="fi_profile">First input</label> 
     <input class="form-control" type="text" id='fi_profile' name="first_input"> 

     <label for="si_profile">Second input</label> 
     <input class="form-control" type="text" id='si_profile' name="second_input"> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="messages"><br> 
     <label for="fi_messages">First input</label> 
     <input class="form-control" type="text" id='fi_messages' name="first_input"> 

     <label for="si_messages">Second input</label> 
     <input class="form-control" type="text" id='si_messages' name="second_input"> 
    </div> 
    </div> 
</div>