JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Form</h2>
<form action="" method="post">
    <label>test[foo1][bar1][]</label>
    <input type="text" name="test[foo1][bar1][]" maxlength="12" size="12"/>
    <br/>
    
    <label>test[foo1][bar1][]</label>
    <input type="text" name="test[foo1][bar1][]" maxlength="12" size="12"/>
    <br/>
    
    <label>test[foo1][bar2][]</label>
    <input type="text" name="test[foo1][bar2][]" maxlength="12" size="12"/>
    <br/>
    
    <label>test[foo2][bar1][]</label>
    <input type="text" name="test[foo2][bar1][]" maxlength="12" size="12"/>
    <br/>
    
    <input name="honey[badger]" value="a">
    <input name="wombat[]" value="b">
    <input name="hello[panda][]" value="c">
    <input name="animals[0][name]" value="d">
    <input name="animals[0][breed]" value="e">
    <input name="crazy[1][][wonky]" value="f">
    <input name="dream[as][vividly][as][you][can]" value="g">
    <br/>
    
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Gender:<br/>
Male:<input type="radio" name="gender" value="Male"/><br/>
Female:<input type="radio" name="gender" value="Female"/><br/>
Favorite Food:<br/>
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/>
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/>
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/>
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>
Select a Level of Education:<br/>
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br/>
Select your favorite time of day:<br/>
<select size="3" name="TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

CSS

form {
    line-height: 2em;
}
p {
    margin: 5px 0;
}
h2 {
    margin: 10px 0;
    font-size: 1.2em;
    font-weight: bold
}
#result {
    margin: 10px;
    background: #eee;
    padding: 10px;
    height: 40px;
    overflow: auto;
}

JavaScript

function serializeFormObject(form)
{
    function trim(str)
    {
        return str.replace(/^\s+|\s+$/g,"");
    }
    
    var o = {};
    var a = $(form).serializeArray();
    $.each(a, function() {
        var nameParts = this.name.split('[');
        if (nameParts.length == 1) {
            // New value is not an array - so we simply add the new
            // value to the result object
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        }
        else {
            // New value is an array - we need to merge it into the
            // existing result object
            $.each(nameParts, function (index) {
                nameParts[index] = this.replace(/\]$/, '');
            });
            
            // This $.each merges the new value in, part by part
            var arrItem = this;
            var temp = o;
            $.each(nameParts, function (index) {
                var next;
                var nextNamePart;
                if (index >= nameParts.length - 1)
                    next = arrItem.value || '';
                else {
                    nextNamePart = nameParts[index + 1];
                    if (trim(this) != '' && temp[this] !== undefined)
                        next = temp[this];
                    else {
                        if (trim(nextNamePart) == '')
                            next = [];
                        else
                            next = {};
                    }
                }
                
                if (trim(this) == '') {
                    temp.push(next);
                } else
                    temp[this] = next;
                
                temp = next;
            });
        }
    });
    return o;
}

$(function() {
   ...