Come avere un solo modulo su più schede di Bootstrap di Twitter?

Question

Come avere uno uno più schede di Bootstrap su Twitter?

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

Answer 1

Cosa c'è di sbagliato nell'avere uno <form> che avvolge tutto?

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

stai presentando scheda per scheda o una volta l'ultimo scheda?

se one-by-one (per Esempio, la convalida), è sufficiente utilizzare $.post per inviare i dati avanti e indietro on-the-fly (in altre parole, effettuare chiamate Ajax).

Answer 2

Mi sono appena imbattuto nello stesso problema, se si desidera inviare una volta nell'ultima scheda, presumo che ci sia un pulsante da qualche parte per spostare le schede beetwen. Per impostazione predefinita, facendo clic su tali pulsanti si attiverà la richiesta POST. Per evitare che questo componente aggiuntivo seguente riga al vostro scatto del tasto funciton:

event.preventDefault();