JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<script src="http://daffl.github.io/jquery.dform/release/jquery.dform-1.1.0.js"></script>
<script src="https://lasdashboard.co.uk/BuildForm/JS/jquery.gform/jquery.htmlClean.js"></script>
<script src="https://lasdashboard.co.uk/BuildForm/JS/jquery.gform/jquery.deForm.js"></script>
<div id="wrap" class="box">
    <div id="composer">
    </div>    
</div>

<div id="result"  class="box">
   
</div>


<div id="errorCheck" class="box">
    <div id="errorCheckcomposer">
    </div>    
</div>

CSS

.box{
    margin:10px;
}

#result{
   border-top:1px solid #bdbdbd;
   border-bottom:1px solid #bdbdbd;
   background:#ececec;
    margin-bottom:20px;
}


#errorCheck{
    

}

JavaScript

var dForm = {"type":"div","id":"composer","html":[{
    "type" : "select",
    "id" : "testsel",
    "options" : {
        "us" : "USA",
        "ca" : "Canada",
        "de" : {
            "selected" : "selected",
            "html" : "Germany"
        }
    }
}
                                                 ] };
       

$('#composer').dform(dForm);
var forms = $('#composer').deForm();
$('#result').html(forms);
$('#errorCheckcomposer').dform(JSON.parse(forms));