Question

我正在使用引导标签来构建一个＆＃34;创建新咨询＆＃34;形式，基本结构如下：

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

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

我理解为什么会这样，但我不确定在多个标签中实现表单的正确方法。

Answer 1

如果你使用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>

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

1 个答案: