web-dev-qa-db-ja.com

Bootstrap-複数のタブにフォームを実装する

bootstrapタブを使用して、「Create New Consult」フォームを作成しています。基本的な構造は次のとおりです。

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

次に、タブに問題があることを発見しました（たとえば、一度に複数のタブをレンダリングするなど）。

これが発生している理由は理解していますが、複数のタブにフォームを実装する正しい方法がわかりません。

javascripttwitter-bootstraptabs
7
TimothyAURA

ブートストラップを使用している場合は、これを試すことができます。

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

すべてのタブをフォームにラップできるはずです。

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

実用的なデモ

4
Zim