JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="header">
    <h3 class="text-muted">Form Project</h3>
  </div>
  <div class="row">
    <div class="col-lg-12">
        <form role="form" id="tform">

          <div class="form-group">
            <label>Text Input</label>
              <input class="form-control" name="text1" />
            <p class="help-block">Example block-level help text here.</p>
          </div>

          <div class="form-group">
            <label>Text Input with Placeholder</label>
              <input class="form-control" placeholder="Enter text"  name="text2" />
          </div>

            <div class="form-group">
            <label>Text area</label>
            <textarea class="form-control" rows="3"  name="textarea"></textarea>
          </div>

          <div class="form-group">
            <label>Checkboxes</label>
            <div class="checkbox">
              <label>
                  <input type="checkbox" value="1" name="checkBox1[]" />
                Checkbox  1
              </label>
            </div>
           <div class="checkbox">
              <label>
                <input type="checkbox" value="2" name="checkBox1[]" />
                Checkbox  2
              </label>
            </div>
           <div class="checkbox">
              <label>
                <input type="checkbox" value="3" name="checkBox1[]" />
                Checkbox  3
              </label>
            </div>
          </div>

          <div class="form-group">
            <label>Inline Checkboxes</label>
            <label class="checkbox-inline">
              <input type="checkbox" name="checkBox2[]" value="4" /> 4
            </label>
            <label class="checkbox-inline">
              <input type="checkbox" name="checkBox2[]" value="5" /> 5
            </label>
            <label class="checkbox-inline">
              <input type="checkbox"...

JavaScript

(function( $ ){
$.fn.formBuilder = function(options) {
   var $bform=this.eq(0);
   var opt = {
       plugins : []
   }
   $.extend(opt, options);
   function getNT(obj){ return { nName : obj.nodeName.toUpperCase(), nType : obj.type.toUpperCase()} }
   if( ! $bform.data('formBuilder') )
   {
	   $.extend($bform, {
	       fields: {},
	       pluginEle : {},
	       get: function(key) {
	           return $((typeof $bform.fields[key] != 'undefined') ? $bform.fields[key] : {});
	       },
	       getValue: function(key) {
	           var value, $f = $bform.get(key),d = getNT($f[0]);
	           if( $.isArray( $bform.pluginEle[d.nType] ) )
	           {
	              $.each( $bform.pluginEle[d.nType] , function(i,pluginName){
	              	 value = $bform.triggerHandler(d.nType+'_getValue.'+pluginName , [$f,$bform]);
	              })
	           }else if ($f.length > 1) {
	               $f = $f.filter(':checked');
	               var v = [];
	               if ($f.length > 1) {
	                   $f.each(function(i, n) {
	                       v.push( n.value )
	                   })
	               } else {
	                   v = $f.val();
	               }
	               value = v;
	           } else {
	               value = $f.val();
	           }
	           return value
	       },
	       setValue: function(key, value) {
	           if ($.isPlainObject(key)) {
	               $.each(key, function(k, v) {
	                   $bform.setValue(k, v);
	               });
	               return $bform;
	           } else {
	               if (typeof $bform.fields[key] != 'undefined') {
	                   var $field = $bform.fields[key],d = getNT($field[0]);
			           if( $.isArray( $bform.pluginEle[d.nType] ) )
			           {
			              $.each( $bform.pluginEle[d.nType] , function(i,pluginName){
			              	 $bform.triggerHandler(d.nType+'_setValue.'+pluginName , [$field,value,$bform]);
			              })
			           }else{
		         ...