formBuilder Basic

formBuilder with no options.

by bvotcode

HTML

<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>
<div class='sel-box'>
  <select name="form_type" id="form_type">
    <option value="1">Type 1</option>
    <option value="2" selected="selected">Type 2</option>
   </select>

</div>
 
<div id="fb-editor"></div>

CSS

.sel-box { padding: 5px;}

JavaScript

var defaultFormElements = [{"type":"select","required":true,"label":"Custom Control","className":"select-with-search pmd-select2 form-control select2-hidden-acces","name":"custom_control","values":[{"label":"PI01","value":"1","selected":true},{"label":"PI02","value":"2"},{"label":"PI03","value":"3"},{"label":"PI04","value":"4"},{"label":"PI001","value":"5"},{"label":"PI002","value":"6"},{"label":"PI003","value":"7"},{"label":"PI004","value":"8"},{"label":"PI005","value":"9"},{"label":"PI05","value":"10"}]},{"type":"text","required":true,"label":"Visit Date","className":"mdl-textfield__input date","name":"visit_date","subtype":"text"},{"type":"text","required":true,"label":"Date File Received","className":"mdl-textfield__input date","name":"date_file_received","subtype":"text"}];

jQuery(function($) {

$('#form_type').on('change', function () {
        var formTypeData = $(this).val();
        initializeFormBuilder(defaultFormElements) 
        
});
  /*var fbEditor = document.getElementById('fb-editor');
  $(fbEditor).formBuilder();*/
});


var disableAttributesData = {"checkbox-group":["description","inline","toggle","access","other"],"number":["placeholder","description","step","access","other"],"text":["placeholder","description","access","type"],"textarea":["placeholder","description","access","type"],"radio-group":["description","inline","access","other"],"select":["multiple","access","description","placeholder"]};

var disableFieldsData = ["autocomplete","file","paragraph","button","hidden","header","number"];

var customControlElement =  {label: "Custom Control",type: "select",subtype: "select",icon: "⿲",values:[{"label": "PI01","value": "1","selected": true},{"label": "PI02","value": "2",},{"label": "PI03","value": "3",},{"label": "PI04","value": "4",},{"label": "PI001","value": "5",},{"label": "PI002","value": "6",},{"label": "PI003","value": "7",},{"label": "PI004","value": "8",},{"label": "PI005","value": "9",},{"label": "PI05","value": "10",},]};

var...