ynamic jQuery ViewModel Example

by 2Yootz

HTML

<form>
    <div>
        <label for="txtEmail">Email:</label>
        <input name="email" id="txtEmail" />
    </div>
    <br />
    <div>
        <label for="txtInfo">Info:</label>
        <textarea name="info" id="txtInfo" cols="40" rows="6"></textarea>
    </div>
    <br />
    <div>
        <label for="lstDegree">Degree:</label>
        <select name="degree" id="lstDegree">
            <option></option>
            <option value="A">Associates Degree</option>
            <option value="B">Bachelors Degree</option>
            <option value="M">Masters Degree</option>
            <option value="D">Doctorate Degree</option>
            <option value="0">Other</option>
        </select>
    </div>
    <br />
    <fieldset>
        <legend>Gender</legend>
        <div>
            <label>
                <input type="radio" name="gender" value="M" />Male</label>
        </div>
        <div>
            <label>
                <input type="radio" name="gender" value="F" />Female</label>
        </div>
    </fieldset>
    <br />
    <div>
        <label>
            <input type="checkbox" value="1" name="donor" />Organ Donor</label>
    </div>
    <br />
    <input type="button" id="btnTest" value="Test" />
</form>
<div id="resultpane">
    <div class="bold">Results:</div>
    <div id="results"></div>
</div>

CSS

label {
    font-weight:bold;
    display:block;
}
#resultpane {
    display:none;
    padding-top:20px;
}
.bold {font-weight:bold;}

JavaScript

$(document).ready(function () {
    $("#btnTest").click(function () {
        var model = {
            email: "",
            info: "",
            degree: "",
            gender: "",
            donor: ""

        };
        var result = getViewModel(model);
        $("#results").html(JSON.stringify(result));
        $("#resultpane").show();
    });
});



function getViewModel(model, url) {

    var obj = {};

    for (var key in model) {
        var fld = $("[name='" + key + "']");


        var type = "";
        if (fld.is("input")) {
            type = fld.attr("type");
        } else if (fld.is("select")) {
            type = "select";
        } else if (fld.is("textarea")) {
            type = "textarea";
        }

        switch (type) {
            case "select":
            case "textarea":
            case "text":
            case "password":
            case "hidden":
            case undefined:
                if ($.isArray(model[key])) {
                    model[key] = fld.map(function () {
                        return this.value;
                    }).get();
                } else {
                    model[key] = fld.val();
                }
                break;
            case "radio":
                model[key] = fld.closest(":checked").val();
                break;
            case "checkbox":
                model[key] = fld.closest(":checked").map(function () {
                    return this.value;
                }).get();
                break;
        }

        var chks = [];

        $("[name ^= '" + key + "['][name *= ']'").each(function () {

            var fld = $(this);
            var name = fld.attr("name");
            var val = fld.val();

            if (fld.is("input")) {
                if (fld.attr("type") == "checkbox") {
                    if (fld.is(":checked")) {
                        chks.push(name);
                    }
                    return;
                }
            }
            if...