Как иметь только одну форму на нескольких вкладках Twitter Bootstrap?

Как получить одну форму в одной вкладке Twitter Bootstrap?

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Tab1</a>
    </li>
    <li>
      <a href="#2" data-toggle="tab">Tab2</a>
    </li>            
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="1">
      <form id="personal-data" class="form-horizontal">
      ...
    </div>
    <div class="tab-pane" id="2">
      <!-- form controls to be continued here -->
      <p>Howdy, I'm in Section 2.</p>
    </div>            
  </div>
</div>

Ответ 1

Что не так, если у вас есть <form>, который обертывает все?

<form id="personal-data" class="form-horizontal" method="POST" action="#">

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Tab1</a>
    </li>
    <li>
      <a href="#2" data-toggle="tab">Tab2</a>
    </li>            
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="1">      
      ...
    </div>
    <div class="tab-pane" id="2">
      <!-- form controls to be continued here -->
      <p>Howdy, I'm in Section 2.</p>
    </div>            
  </div>
</div>

</form>

вы отправляете вкладку вкладкой или один раз на вкладке последней страницы?

если один за другим (например, проверка), просто используйте $.post для передачи данных назад и вперед "на лету" (другими словами, совершите ajax-вызовы).

Ответ 2

Я просто столкнулся с одной и той же проблемой, если вы хотите отправить один раз на последней вкладке, я предполагаю, что там есть кнопка для перемещения вкладок beetwen. По умолчанию нажатие этих кнопок вызывает запрос POST. Чтобы предотвратить добавление следующей строки к вашей кнопке, нажмите funciton:

event.preventDefault();