Comment faire pour avoir juste un formulaire sur plusieurs Twitter Bootstrap onglets?

Comment avoir une forme l'un de plusieurs Twitter Bootstrap onglets?

<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>

OriginalL'auteur LA_ | 2012-02-10

  1. 16

    Quel est le problème d'avoir un <form> qui enveloppe le tout?

    <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>

    soumettez-vous onglet par onglet ou une fois sur le dernier onglet?

    si un par un (par exemple, la validation), il suffit d'utiliser $.post pour envoyer des données en arrière et en avant à la volée (en d'autres mots, faire des appels ajax).

    Merci, @balexandre. Que dois-je faire avec <fieldset>? Puis-je avoir plusieurs <fieldset>?
    Notez que vous aurez besoin de remplacer certains de l'amorçage.css si vous voulez une forme qui s'étend sur onglets (et semble de bonne qualité). Voir stackoverflow.com/questions/10694961/...

    OriginalL'auteur

  2. 0

    Je viens de tombé sur le même problème, si vous voulez soumettre une fois dans le dernier onglet, je suppose, il y a un bouton quelque part pour se déplacer entre les onglets. Par défaut en cliquant sur ces boutons pour déclencher la requête POST. Pour éviter cela, ajoutez la ligne suivante à votre clic sur le bouton d'une fonction: 

    event.preventDefault();

    OriginalL'auteur