multi form

index.html

<div class="container">
<!-- TOP TABS -->
  <ul id="tabs" class="nav nav-pills nav-justified">
    <li class="active">
      <a href="#tab1" data-toggle="tab" class="inactiveLink">
        Order Summary
        <span id="ok-icon" class="glyphicon glyphicon-ok hidden"></span>
      </a>
    </li>
    <li>
      <a href="#tab2" data-toggle="tab" class="inactiveLink">Confirmation</a>
    </li>
  </ul>

<div class="tab-content">
<!-- FIRST TAB -->
<div class="tab-pane active" id="tab1">
  <div class="container-fluid">
    <h3>Your order:</h3>
    <table class="table">
      <tbody>
        <tr>
          <td class="td-padding">360 Pass</td>
          <td class="td-padding"><span>100 &euro;</span></td>
          <td class="text-center td-padding"><span id="t1_pocet">0</span></td>
          <td class="text-right">
            <button class="btn" id="t1_minus" onclick="calculate(t1,'minus')">-</button>
            <button class="btn" id="t1_plus" onclick="calculate(t1,'plus')">+</button>
          </td>
        </tr>
        <tr>
          <td class="td-padding">Summit Pass</td>
          <td class="td-padding"><span>350 &euro;</span></td>
          <td class="text-center td-padding"><span id="t2_pocet">0</span></td>
          <td class="text-right">
            <button class="btn" id="t2_minus" onclick="calculate(t2,'minus')">-</button>
            <button class="btn" id="t2_plus" onclick="calculate(t2,'plus')">+</button>
          </td>
        </tr>
        <tr>
          <td class="td-padding">VIP Summit Pass</td>
          <td class="td-padding"><span>800 &euro;</span></td>
          <td class="text-center td-padding"><span id="t3_pocet">0</span></td>
          <td class="text-right">
            <button class="btn" id="t3_minus" onclick="calculate(t3,'minus')">-</button>
            <button class="btn" id="t3_plus" onclick="calculate(t3,'plus')">+</button>
          </td>
        </tr>
      </tbody>
    </table>
    <hr>
    <b>Total amount: <span id="amount"></span> &euro;</b>
    <hr>
    <div class="text-right">
      <button id="continue" class="btn btn-success" disabled> CONTINUE </button>
    </div>

  </div> <!-- end container fluid -->
</div> <!-- end Tab1 content -->


<div class="tab-pane" id="tab2">
  <div class="container-fluid">
    <h3>Confirm your order:</h3>
    <hr>
    <div class="row">
      <label for="name" class="col-sm-4 p-top text-right">Name</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" name="name" placeholder="Full name" required>
        <div class="help-block with-errors"></div>
      </div>
    </div>

    <div class="row">
      <label for="email" class="col-sm-4 p-top text-right">Email</label>
      <div class="col-sm-6">
        <input type="email" class="form-control" name="email" placeholder="[email protected]" required>
      <div class="help-block with-errors"></div>
      </div>
    </div>

    <div class="row">
      <label for="payment" class="col-sm-4 p-top text-right">Payment Method</label>
      <div class="col-sm-4">
        <select class="form-control" name="payment">
          <option value="Invoice">Invoice</option>
          <option value="Credit card">Credit card</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <div id="listed_t1" class="hidden listed paddingLF"><h4>360 pass tickets:</h4></div>
      <div id="listed_t2" class="hidden listed paddingLF"><h4>Summit pass tickets:</h4></div>
      <div id="listed_t3" class="hidden listed paddingLF"><h4>VIP pass tickets:</h4></div>
    </div>

    <!-- Tady jsou skryte inputy -->
    <div class="form-group hidden">
      <input id="total_amount" type="number" name="total_amount" value="0">
      <input id="t1_amount" type="number" name="t1_amount" value="0">
      <input id="t2_amount" type="number" name="t2_amount" value="0">
      <input id="t3_amount" type="number" name="t3_amount" value="0">
    </div>

    <hr>
    <div class="row paddingLF">
      <div class="text-left buttons-wrapper pull-left">
        <button id="back" type="button" class="btn btn-warning">BACK</button>
      </div>
      <div class="text-right buttons-wrapper pull-right">
        <button id="submit_details" type="submit" class="btn btn-success">SEND</button>
      </div>
    </div>


  </div> <!-- end container-fluid -->
</div> <!-- end tab-content -->
</div><!--  end container -->

multi-form.markdown

multi form

A Pen by Martin Franek on CodePen.

License.

script.js

      /* when jQuery laods */
    $(document).ready(function() {
      /* click on back button - will do reset and removal of previously appended children */
      $('#back').on('click', function() {
        $('li.active').filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
        $('li').find('a[data-toggle="tab"]').removeClass('btn-success');
        $('#ok-icon').addClass('hidden');
        total_tickets = 0;
        $('#listed_t1').addClass('hidden').children().not('h4').remove();
        $('#listed_t2').addClass('hidden').children().not('h4').remove();
        $('#listed_t3').addClass('hidden').children().not('h4').remove();
        render();
      });
      /* click on continue button */
      $('#continue').on('click', function() {
        if (total_tickets > 0) {
    			$('li.active').filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
          $('li').find('a[data-toggle="tab"]').addClass('btn-success');
          $('#ok-icon').removeClass('hidden');
          addTicketList(t1);
          addTicketList(t2);
          addTicketList(t3);
        }
  		});
      render();
  	});
    /* VARIABLES */
    var total = 0;         // total amount to be paid
    var total_tickets = 0; // total amount of tickets
    var t1 = { id: 't1', pocet: 0, hodnota: 100 }; // ticket 1st category
    var t2 = { id: 't2', pocet: 0, hodnota: 350 }; // ticket 2nd category
    var t3 = { id: 't3', pocet: 0, hodnota: 800 }; // ticket 3rd category

    /* perform either adding or substracting on a provided object */
    calculate = function(object, action) {
      if (action === 'plus') {
        total += object.hodnota;
        object.pocet++;
      } else if ((action === 'minus') && (object.pocet > 0)) {
        total -= object.hodnota;
        object.pocet--;
      }
      render();
    }

    /* recalculate and display numbers + assigning hidden inputs */
    render = function() {
      total_tickets = t1.pocet + t2.pocet + t3.pocet;
      $('#amount').html(total.toFixed(0));
      $('#t1_pocet').html(t1.pocet); $('#t2_pocet').html(t2.pocet); $('#t3_pocet').html(t3.pocet);
      /* assigning hidden inputs */
      $('#total_amount').html(total.toFixed(0));
      $('#t1_amount').html(t1.pocet); $('#t2_amount').html(t2.pocet); $('#t3_amount').html(t3.pocet);

      if (total_tickets > 0) {
        $('#continue').prop('disabled', false);
      } else {
        $('#continue').prop('disabled', true);
      }
    }

    /* add a list of tickets if multiple tickets are selected, argument is a ticket category */
    addTicketList = function(objekt) {
      if (objekt.pocet > 1 || total_tickets > 1) {
        for (var i = 0; i < objekt.pocet; i++) {
          $('#listed_' + objekt.id).removeClass('hidden').append(insert(i+1));
        }
      }
    }

    /* insert a row if multiple ticket are selected, argument passed is a ticket count (for that section) */
    var insert = function(num) {
      return (
      "<div class='row'>"+
        "<div class='col-xs-1'><label for='row' class='p-top'><span class='ticket_span'>"+ num +"#</span></label></div>"+
        "<div class='col-xs-5'><input type='text' class='form-control' name='names[]' placeholder='Full name' required></div>"+
        "<div class='col-xs-6'><input type='email' class='form-control' name='emails[]' placeholder='[email protected]' required></div>"+
      "</div>");
    }

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

.btn:focus {
        outline: none;
      }
      .hidden {
        display: none;
      }
      .listed {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .p-top {
        padding-top: 7px;
      }
      .td-padding {
        padding-top: 15px !important;
      }
      .container {
        padding-top: 10px;
        padding-bottom: 10px;
        min-width: 480px;
        max-width: 768px;
      }
      .container-fluid {
        padding-bottom: 10px;
        margin-top: 1px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      .paddingLF {
        padding-left: 15px;
        padding-right: 15px;
      }
      .inactiveLink {
        pointer-events: none;
        cursor: default;
      }
      .buttons-wrapper {
        display: inline-block;
      }

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />