Bootstrap - Implement a form across multiple tabs

Question

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.

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.

Answer 1

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>

Answer 2

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