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

Posted 2023-02-22

【中文标题】Bootstrap - 跨多个选项卡实现表单

【英文标题】：Bootstrap - Implement a form across multiple tabs

【发布时间】：2017-07-13 23:54:58

【问题描述】：

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

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

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

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

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

然后我发现标签有问题（例如，一次渲染多个标签等）。

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

【参考方案1】：

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

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

【讨论】：

在表单元素中使用 action='/consults' 而不是 demo.php

您或其他人能否进一步解释您的解决方案。谢谢。

【参考方案2】：

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

<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

【讨论】：

标签似乎没有变化

不，标签不会自动更改，问题也不是，