Forms with Tabs

forms-with-tabs.markdown

Forms with Tabs

A Pen by Sterling Heibeck on CodePen.

License.

index.html

<form action="">
<div id="tabs" class="">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>    
  </ul>
  <!-- begin tab 1 -->
  <div id="tabs-1">
    <div id="form-edit-1">
        <textarea id="fb-template-1" class="form-builder-template">
      <form-template>
        <fields>
          <field id="form-control new-tab" label="Tab A" name="text-input-1459364884890" type="text" subtype="text"></field>
          <field class="form-control" label="Text Field" name="text-input-1459364308608" type="text" subtype="text"></field>
          <field label="Checkbox" name="checkbox-1459364314833" type="checkbox"></field>
          <field class="form-control new-tab" label="Tab B" name="text-input-1459365042135" type="text" subtype="text"></field>
          <field class="form-control" label="Date Field" name="date-input-1459364342478" type="date"></field>
          <field label="Radio Group" name="radio-group-1459364353102" type="radio-group">
            <option value="option-1">Option 1</option>
            <option value="option-2">Option 2</option>
          </field>
        </fields>
      </form-template>
    </textarea>
    </div>
    <div id="form-render-1">      
    </div>
  </div> <!-- end tab 1 -->
  
  <!-- begin tab 2 -->
  <div id="tabs-2">
    <div id="form-edit-2">
        <textarea id="fb-template-2" class="form-builder-template">
      <form-template>
        <fields>
          <field label="Header" type="header" subtype="h1"></field>
          <field label="Checkbox" name="checkbox-1459367412444" type="checkbox"></field>
          <field class="form-control" label="Date Field" name="date-input-1459367416782" type="date"></field>
        </fields>
      </form-template>
    </textarea>
    </div>
    <div id="form-render-2">      
    </div>
  </div><!-- end tab 2 -->
</div>
  <button class="btn btn-primary">Submit Form</button>
</form>

script.js

$(function() {
  'use strict';  
  $('#tabs').tabs({
    activate: function( event, ui ) {        
      renderForm(parseInt(ui.newTab.index())+1);
    }
  });   

  //render the builder just once to initialize it
  $('.form-builder-template').formBuilder();

  //render the first tab
  renderForm(1);
    
  // render each tab as we activate it
  function renderForm(id) {      
    var fbTemplate = document.getElementById('fb-template-' + id)
        , formContainer = document.getElementById('form-render-' + id)
        , formRenderOpts = {
          container: formContainer,
          formData: fbTemplate.value,
        };
    
    //render the container with options
    $(formContainer).formRender(formRenderOpts);
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-render.min.js"></script>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://formbuilder.online/assets/css/form-builder.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />