JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<form method="post">
    <input type="hidden" name="hidden" value="this won't be included"/>
    <div style="display:none">
        <input type="text" name="hidden_text" value="this can be filtered"/>
    </div>
    <input type="password" name="password"/><br>
    <input type="text" name="text"/><br>
    <input type="checkbox" name="checkboxes" value="a"/> a
    <input type="checkbox" name="checkboxes" value="b"/> b
    <input type="checkbox" name="checkboxes" value="c"/> c <br>
    <input type="radio" name="radio" value="x"/> x
    <input type="radio" name="radio" value="y"/> y
    <input type="radio" name="radio" value="z"/> z <br>
    <select name="select">
        <option value="">-- select --</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select><br>
    <select name="multiselect" multiple="multiple">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select><br>
    <textarea name="textarea"></textarea><br>
    <button name="store">Store Values</button>
    <button name="restore">Restore Values</button>
    <button type="reset">Reset Form</button>
</form>
<pre id="state">(form state will display here...)</pre>

CSS

form { padding:10px; margin:10px; border:dotted 1px #888; }

JavaScript

/**
 * jQuery plugin to store/restore form-state as an object.
 *
 * This does not deal with encoding/decoding in JSON or any
 * other data-format, nor does it deal with storage-media.
 *
 * Minifies to < 1KB.
 *
 * To obtain the state of form elements:
 * 
 *   var state = $('form').formstate();
 *
 * To obtain the state of certain form elements:
 *
 *   var state = $('form').formstate(':visible');
 *
 * To restore state to form elements:
 *
 *   $('form').formstate(state);
 *
 * To restore state to certain form elements:
 *
 *   $('form :input:visible').formstate(state);
 *
 * @author Rasmus Schultz <http://blog.mindplay.dk>
 */
(function($) {

    var
        excluded_type = ':button,:submit,:reset,:password',
        input_types = 'input,select,textarea';
    
    function get_state($inputs) {
        var data = {};
        
        $inputs.each(function() {
            var $input = $(this);
            
            if ($input.is(excluded_type)) {
                return;
            }
            
            if ($input.is(':checkbox')) {
                var list = data[$input.attr('name')] || [],
                    value = $input.attr('value');
                if ($input.prop('checked')) {
                    list.push(value);
                }
                data[$input.attr('name')] = list;
            } else if ($input.is(':radio')) {
                if ($input.prop('checked')) {
                    data[$input.attr('name')] = $input.attr('value');
                }
            } else {
                data[$input.attr('name')] = $input.val();
            }
        });
        
        return data;
    }
    
    function set_state($inputs, data) {
        $inputs.each(function() {
            var $input = $(this);
            
            if ($input.is(excluded_type)) {
                return;
            }
            
            if ($input.is(':checkbox')) {
                $input.prop('checked', (data[$input.attr('name')] ||...