// 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();
<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; width:320px; vertical-align:middle">
<div>
<input type="checkbox" id="bands_rs" name="bands" value="Rolling Stones">
<label for="bands_rs">Rolling Stones</label>
<br>
<input type="checkbox" id="bands_beatles" name="bands" value="The Beatles">
<label for="bands_beatles">The Beatles</label>
</div>
<div>
<input type="checkbox" id="bands_who" name="bands" value="The Who">
<label for="bands_who">The Beatles</label>
<br>
<input type="checkbox" id="bands_wings" name="bands" value="Wings">
<label for="bands_wings">Wings</label>
</div>
<div class="clear"></div>
</div>
</div>
<div class="message">
<div class="initial">Your form is in initial state.</div>
<div class="unsaved">You have unsaved data.</div>
</div>
</div>
</form>
External resources loaded into this fiddle: