uicform3 - 03 form with reset Button

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">
        <div class="property">
            <label>title</label>
            <div style="display:inline-block; width:200px; vertical-align:middle">
                <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="birthday">nationality</label>
            <input type="text" id="nationality" name="nationality" value="" placeholder="nationality">
        </div>
        <div class="property">
            <label for="birthday">member</label>
            <input type="checkbox" id="member" name="member" value="1" placeholder="member">
        </div>
        <div class="property">
            <label for="birthday">agree with newsletter</label>
            <input type="checkbox" id="newsletter" name="newsletter" value="1" placeholder="newsletter" checked="checked">
        </div>
        <div class="property divbands">
            <label>Bands</label>
            <br>
            <div style="display:inline-block;...

JavaScript

// add reset buttons and register their event handler
$('div.property').each(function () {
    var key = $(this).find('input, textarea, select').attr('name');
    var b = document.createElement('button');
    $(b).addClass('reset');
    $(b).attr('tabindex', '-1');
    $(b).on('click', function(){
        var initVal = $('form:eq(0)').uicForm3('initVal',key);
        $('form:eq(0)').uicForm3('val',key, initVal);
    });
    var tn = document.createTextNode('reset');
    b.appendChild(tn);
    $(this).append(b);
});

// 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');
            $(elements[0]).closest('div.property').find('.reset').show();
        } else {

            $(elements[0]).closest('div.property').removeClass('modified');
            $(elements[0]).closest('div.property').find('.reset').hide();
        }
    },
    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();