JSFiddle - React, Tailwind, and code Playground

by nicholas_r

HTML

<script src="http://level.travel/assets/sugar-full.min.js"></script>
<form>
    <p><input name="input1" type='text'></p>
    <p><input name="input2" type='text'></p>
    <p><input name="input3" value="true" type='checkbox'></p>
    <p><select name="selectbox" id="hello">
            <option value="1">value 1</option>
            <option value="2">value 2</option>
            <option value="3">value 3</option>
            <option value="4">value 4</option>
            <option value="5">value 5</option>
        </select></p>
</form>


<div id='log'></div>

CSS

form {
    border: 2px solid black;
    margin: 10px;
    padding: 10px;
}

#log{
    white-space: pre-wrap;
}

CoffeeScript

$ ->
    form = $('form')
    
    serialize_data = (form)->
       form_data     = Object.fromQueryString(decodeURIComponent($(form).serialize()));
       serialized    = JSON.stringify(form_data, false, "   ")
       $("#log").html(serialized)

    form.on "keyup change", (-> serialize_data(this))
    serialize_data(form)