Converting table data to JSON format

A very neat example where you can convert table data into JSON string. Please view open console to view output.

by Duke Dinh

HTML

<form id="nameGenderForm">
    <table id="nameGenderTable">

        <tr>
            <th >Name</th>
            <th >Gender</th>
        </tr>


            <tr>
                <td><input type="text" name="studentName"></td>
                <td>
                    <select name="studentGender">
                        <option value="male">male</option>
                        <option value="female">female</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td><input type="text" name="studentName"></td>
                <td>
                    <select name="studentGender">
                        <option value="male">male</option>
                        <option value="female">female</option>
                    </select>
                </td>
            </tr>
        </table>
    <input type="submit" />
</form>

JavaScript

(function($) {
    $.extend({
        toDictionary: function(query) {
            var parms = {};
            var items = query.split("&"); // split
            for (var i = 0; i < items.length; i++) {
                var values = items[i].split("=");
                var key = decodeURIComponent(values.shift());
                var value = values.join("=")
                parms[key] = decodeURIComponent(value);
            }
            return (parms);
        }
    })
})(jQuery);

    
(function($) {
    $.fn.serializeFormJSON = function() {
        var o = [];
        $(this).find('tr').each(function() {
            var elements = $(this).find('input, textarea, select')
            console.log($(this));
            if (elements.size() > 0) {
                var serialized = $(this).find('input, textarea, select').serialize();
                var item = $.toDictionary(serialized );
                o.push(item);
            }
        });
        return o;
    };
})(jQuery);

$("#nameGenderForm").submit(function(event) {
    event.preventDefault();

    var rawData = $('#nameGenderForm').serializeFormJSON();
    console.log(rawData);
    var formData = JSON.stringify(rawData);
    console.log(formData);
});