uicform3 - 09 emptyVal

by fiddlerintheoffice

HTML

<script src="http://megaflop.net/uic/jquery.uic-form3.js"></script>
<link rel="stylesheet" href="http://megaflop.net/uic/jquery.uic-form3-jsfiddle.css">
<form>
    <div class="wrapper float border">
        <div class="property">
            <label for="id">id</label>
            <input type="text" id="id" name="id" value="" placeholder="new record" readonly="readonly">
        </div>
        <div class="property divtitle">
            <label>title</label>
            <div>
                <input type="radio" id="title_mr" name="title" value="mr">
                <label for="title_mr">Mr.</label>
                <input type="radio" id="title_ms" name="title" value="ms">
                <label for="title_ms">Ms.</label>
            </div>
        </div>
        <div class="property">
            <label for="firstname">firstname</label>
            <input type="text" id="firstname" name="firstname" value="" placeholder="firstname">
        </div>
        <div class="property">
            <label for="lastname">lastname</label>
            <input type="text" id="lastname" name="lastname" value="" placeholder="lastname">
        </div>
        <div class="property">
            <label for="birthday">birthday</label>
            <input type="date" id="birthday" name="birthday" value="" placeholder="birthday">
        </div>
        <div class="property">
            <label for="nationality">born in:</label>
            <select name="nationality">
                <option value="">-- nothing selected --</option>
                <option value="gb">United Kingdom</option>
                <option value="us">United States</option>
                <option value="jp">Japan</option>
            </select>
        </div>
        <div class="property">
            <label for="favorite">favorite</label>
            <input type="checkbox" id="favorite" name="favorite" value="true">
        </div>
        <div class="property divbands">
     ...

JavaScript

// set defaults for uicForm3
$.fn.uicForm3.defaults = {
    onPropertyModifiedStateChange: function (elements, name, initValue, currentValue, modified, e) {
        if (modified === true) {
            $(elements[0]).closest('div.property').addClass('modified');
        } else {
            $(elements[0]).closest('div.property').removeClass('modified');
        }
    },
    onFormModifiedStateChange: function (modified, e) {
        if (modified === true) {
            $('form:eq(0)').addClass('modified');
        } else {
            $('form:eq(0)').removeClass('modified');
        }
    }
}

// apply uicForm3 to the form
$('form:eq(0)').uicForm3();

var id = -1;

// register actions for the click event of the action buttons
$('#setInitialData').on('click', function (e) {
    var d = data[0];
    $('#rawdata').empty();
    $('form:eq(0)').uicForm3('emptyVal', ['birthday','firstname'], "");
    $('form:eq(0)').uicForm3('initData', d);
});

$('#setEmptyValues').on('click', function (e) {
    $('form:eq(0)').uicForm3('emptyVal', ['birthday','firstname'], null);
    $('form:eq(0)').uicForm3('emptyVal', 'favorite', false);
});
$('#getInitData').on('click', function (e) {
    $('#rawdata').html(syntaxHighlight(JSON.stringify($('form:eq(0)').uicForm3('initData'), null, 2)));
});
$('#getData').on('click', function (e) {
    $('#rawdata').html(syntaxHighlight(JSON.stringify($('form:eq(0)').uicForm3('data'), null, 2)));
});

// This part is less interesting. It's just the data-definition and a syntax highlighter for the json in this example that is not needed for the form handling in any way.

var data = [{
    id: 1,
    title: "mr",
    firstname: "John",
    lastname: "Lennon",
    birthday: "1940-10-09",
    nationality: "gb",
    favorite: "",
    bands: ["The Beatles", "Plastic Ono Band"]
}]

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json,...