twitter-bootstrap Bootstrap - 跨多个选项卡实现表单

Bootstrap - Implement a form across multiple tabs

提问by TimothyAURA

I'm using bootstrap tabs to build a "Create New Consult" form, basic structure as follows:

我正在使用引导程序选项卡构建一个“创建新咨询”表单，基本结构如下：

<div class="tab-content">

  <div class="tab-pane fade show active" id="step1">
    <form method="post" action="/consults">

    </form>
  </div>

  <div class="tab-pane fade" id="step2">
    <form method="post" action="/consults">

    </form>
  </div>

  ...etc

</div>

My form has 5 tabbed sections and a form element inside each tab.

我的表单有 5 个选项卡式部分，每个选项卡内都有一个表单元素。

Now I want to use a single form element around the whole set of tabs (to submit all my form data to datastore at once). I tried this:

现在我想在整个选项卡集周围使用单个表单元素（一次将我的所有表单数据提交到数据存储）。我试过这个：

<div class="tab-content">

  <form method="post" action="/consults">

    <div class="tab-pane fade show active" id="step1">   

    </div>
    <div class="tab-pane fade" id="step2">

    </div>
    ...etc

  </form>

</div>

I then found the tabs had issues (eg. rendering multiple tabs at once, etc).

然后我发现选项卡有问题（例如，一次呈现多个选项卡等）。

I understand why this is happening but I am unsure of the correct way to implement a form across multiple tabs.

我明白为什么会发生这种情况，但我不确定跨多个选项卡实现表单的正确方法。

采纳答案by tushar

You can try this if your using bootstrap.

如果您使用引导程序，您可以试试这个。

<div class="container">

  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Default</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>
<form action="demo.php" method="post">
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>Default</h3>
      <label>username</label><br/>
      <input name="username" type="text" >
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
       <label>name</label><br/>
     <input name="name" type="text" >
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
       <label>password</label><br/>
      <input name="password" type="password" >
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
       <label>email</label><br/>
      <input name="email" type="email" ><br/>
      <input name="submit" type="submit" >
    </div>
  </div>
</form>
</div>

<script>
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(event){
        var x = $(event.target).text();         
        var y = $(event.relatedTarget).text();  
        $(".act span").text(x);
        $(".prev span").text(y);
    });
});
</script>

回答by Zim

You should be able to wrap all of the tabs in a form..

您应该能够将所有选项卡包装在一个表单中。

<form class="tab-content" method="post" id="myForm">
      <div class="tab-pane active" id="step1">
         <p>Here is the content for the first step...</p>
         <input class="form-control" id="input1" name="input1" required="">
         <button class="btn btn-default btn-ok" type="button">OK</button>
      </div>
      <div class="tab-pane" id="step2">
         <p>Here is the content for step 2...</p>
         <input class="form-control" id="input2" name="input2" required="">
         <button class="btn btn-default btn-ok" type="button">OK</button>
      </div>
      <div class="tab-pane" id="step3">
         <p>Here is the content for step 3...</p>
         <input class="form-control" id="input3" name="input3" required="">
         <input class="form-control" id="input4" name="input4" required="">
         <button class="btn btn-default btn-ok" type="button">OK</button>
      </div>
      <div class="tab-pane" id="step4">
         <p>This is the last step. You're done.</p>
         <button class="btn btn-default btn-submit" type="submit">Submit</button>
      </div>
</form>

Working Demo

工作演示