JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<script src="http://cdcportal.manilaconsulting.net/whbs/_scripts/jquery.cookie.js"></script>
<div id="">
    <form name="questionnaire">
    <li>How old are you?</li>
        <li><input name="age" type="text" maxlength="3" /><span class="age message" style="display:none;"></span></li>
    </ul>
        <br />
        <ul id="race">
        <li>Which racial group or groups do you consider yourself to be in? <span class="note">(check all that apply)</span></li>
            <li><input name="race" type="checkbox" value="racea" />American Indian or Alaska Native</li>
            <li><input name="race" type="checkbox" value="raceb" />Asian</li>
            <li><input name="race" type="checkbox" value="racec" />Black or African-American</li>
            <li><input name="race" type="checkbox" value="raced" />Native Hawaiian or other Pacific Islander</li>
            <li><input name="race" type="checkbox" value="racee" />White</li>
            <li><input name="race" type="radio" value="racef" />I prefer not to answer</li>
            <li><input name="race" type="radio" value="raceg" />Does not apply</li>
            <li><input name="race" type="radio" value="raceh" />Don't know</li>
        </ul>
        <br />
        <ul id="sta_terr">
        <li>What U.S. State or U.S. Territory do you live in?</li>
            <li>
                <select name="sta_terr">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                </select>
            </li>
        </ul>
    </form>
</div>

JavaScript

var page = $.cookie("questionnaire"),
    rspcdata = {};

function submit() {
    var page = false;
    page = $.cookie("questionnaire");
    // build array of surveydata
    rspcdata = {};
    $("div#container").find("input,select").each(function() {
        var n = $(this).attr("name"),
            e = this.tagName.toLowerCase(),
            t = $(this).attr("type"),
            s = $(this).prop("checked"),
            v = this.value;
        if (typeof rspcdata[n] == 'undefined') {
            rspcdata[n] = [];
        }
        if (e == "input") {
            switch (t) {
            case "checkbox":
            case "radio":
                if (s) {
                    if (rspcdata[n] instanceof String) {
                        rspcdata[n].push(0);
                    }
                    rspcdata[n].push(v);
                }
                break;
            case "text":
                rspcdata[n].push(v);
                break;
            default:
                break;
            } //switch
        } else if (e == "select") {
            rspcdata[n].push(v);
        } //elseif
    });
    for (var key in rspcdata) {
        var obj = rspcdata[key];
        if (rspcdata[key] !== undefined && rspcdata[key].length === 0) {
            rspcdata[key] = [""];
        }
        if (window.rspcdata[key][1] !== "undefined") {
            if (rspcdata[key][0] == "" && rspcdata[key].length > 1) {
                var val = rspcdata[key][1];
                rspcdata[key] = [val];
            }
        }
    }
    $("div#container").fadeOut();
    $("input#continue").fadeOut();
    $("div#container").html('<img src="../_img/loading.gif" />');
    $("div#container").fadeIn();
    $.ajax({
        url: 'brain.php',
        type: "POST",
        data: ({
            key: '<?php echo $key; ?>',
            group: '<?php echo $group; ?>',
            responses: rspcdata,
            current_page: page,
            cum_count: count,
            cum_total: total,
     ...