JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

<div id  = divHold>
 <input id = name value = name>
<input id = age value = age>
<input id = designation value = des>
<input id = at value = at>
    <select id = selctdID>
        <option value = chetan >chetan</option>
        <option selected value = chetan1 >chetan1</option>
        <option value = chetan2 >chetan2</option>
        
    </select>
<input checked name = csr type= radio id = at value = yes>
<input name = csr type= radio id = at2 value = no>
    
    <input checked name = csr2 type= radio id = at value = yes>
<input name = csr2 type= radio id = at2 value = no>
    
    
<input   type= checkbox id = c1 value = chk1>
<input  checked  type= checkbox id = c2 value = chk2>
<input  checked  type= checkbox id = c3  value = chk3> 
    <input type = button id = inpbutn value = dumy0>
    <button id = butn >Dummy</button>
        <input style=display:none id = hidnInp value = hidden>
            
            <select id = hdnsel style=display:none></select>
        </div>
    <p>click</p>
        <span></span><br></br>
        <b>as of now we assume all form elemnts have ID's</b><br>
        <b>nested from elements cant be retreived using :input which case iterate them all using a common class name</b>

JavaScript

var cQuery =  (function(){
    var data = 0;
    var $_cQuery = {};
        $_cQuery.hii = function(){
        alert(data)
    };
    return $_cQuery;
})();
window.$_ = cQuery;
$_.hii();
//alert($_.data)
/*
$(document).ready(function(){
      
    (function($_){
        $_.delObject = function(object,key){
         delete storeObject[key];
        };
           $_.setObject  = function(object,key,value,writable){
try{
       Object.defineProperty( object, key, {
                value:value,
                writable:writable,
                enumerable: true,//def-false
                configurable: true//def-false
                    });
}
catch(e){
//alert(e)
}

            };
        $_.formToObject = function(definitions){
            $_Object = definitions.object?definitions.object:{};
            $_elimators = definitions.eliminate?definitions.eliminate.join(","):''
            $_editable = definitions.editable;
            $_holder = definitions.holderId?definitions.holderId:false;
            if($_holder)       {
    $('#'+$_holder+' :input:not('+$_elimators+')').each(function(){
        if($(this).is(":radio"))
       {
          // var res = $(this).attr("checked") ? true :false
    $(this).attr("checked") ? $_.setObject($_Object,this.name,$(this).val(),$_editable):""
           //alert(this.name)
       }
        else if($(this).is(":checkbox")){
  
 $(this).attr("checked")? $_.setObject($_Object,this.id,$(this).val(),$_editable):$_.delObject ($_Object, this.id);
        }
        else{
             $_.setObject($_Object,this.id,$(this).val(),$_editable);
        }
    
       }); 
                
            }
        };
    })(cQuery)
    
    

});
var storeObject = {};
$("p").click(function(){
    $("span").empty();

    $_.formToObject({
        eliminate:[':hidden','button',':button'],
        object:  storeObject,
        editable: true,//default,
        holderId:"divHold"
    });
for(var i in storeObject)
{
   
  $('span').append('key  ->...