如何在几个Twitter Bootstrap标签只有一个窗体？ [英] How to have just one form on several Twitter Bootstrap tabs?

问题描述

如何让一个表单形成一个Twitter Bootstrap标签？

 < div class =tabbable 
< ul class =nav nav-tabs> 
< li class =active> 
< a href =＃1data-toggle =tab> Tab1< / a> 
< / li> 
< li> 
< a href =＃2data-toggle =tab> Tab2< / a> 
< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-paneid =1> 
< form id =personal-dataclass =form-horizo​​ntal> 
 ... 
< / div> 
< div class =tab-paneid =2> 
<！ - 表单控件在这里继续 - > 
< p>多谢，我在第2节。< / p> 
< / div> 
< / div> 
< / div> 
  

解决方案

 < form id =personal-data class =form-horizo​​ntalmethod =POSTaction =＃> 
 
< div class =tabbable> 
< ul class =nav nav-tabs> 
< li class =active> 
< a href =＃1data-toggle =tab> Tab1< / a> 
< / li> 
< li> 
< a href =＃2data-toggle =tab> Tab2< / a> 
< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-paneid =1> 
 ... 
< / div> 
< div class =tab-paneid =2> 
<！ - 表单控件在这里继续 - > 
< p>多谢，我在第2节。< / p> 
< / div> 
< / div> 
< / div> 
 
< / form>           （例如验证），只需使用 $ ？ .post 可以实时发送数据（换句话说，进行ajax调用）。
 
How to have one form one several Twitter Bootstrap tabs?
<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>

解决方案
What's wrong of having one <form> that wraps everything up?
<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>
are you submitting tab by tab or once on the last tab?

if one-by-one (for exemple, validation), simply use $.post to send data back and forward on-the-fly (in other words, make ajax calls).

                        
这篇关于如何在几个Twitter Bootstrap标签只有一个窗体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！