// 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();
var id = -1;
// register actions for the click event of the action buttons
$('#setInitialData').on('click', function (e) {
var d = data[0];
id = 0;
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('initData', d);
});
$('#prev').on('click', function (e) {
var num = Math.max(0, --id);
id = num;
var d = data[num];
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('initData', d);
});
$('#next').on('click', function (e) {
var num = Math.min(data.length - 1, ++id);
id = num;
var d = data[num];
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('initData', d);
});
$('#setData').on('click', function (e) {
var d = data[0];
id = 0;
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('data', d);
});
$('#prevData').on('click', function (e) {
var num = Math.max(0, --id);
id = num;
var d = data[num];
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('data', d);
});
$('#nextData').on('click', function (e) {
var num = Math.min(data.length - 1, ++id);
id = num;
var d = data[num];
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
$('form:eq(0)').uicForm3('data', d);
});
$('#getInitialData').on('click', function (e) {
var d = $('form:eq(0)').uicForm3('initData');
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
});
$('#getData').on('click', function (e) {
var d = $('form:eq(0)').uicForm3('data');
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, null, 2)));
});
$('#getModifiedData').on('click', function (e) {
var d = $('form:eq(0)').uicForm3('modifiedData');
$('#rawdata').html(syntaxHighlight(JSON.stringify(d, 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",
bands: ["The Beatles", "Plastic Ono Band"]
}, {
id: 2,
title: "ms",
firstname: "Yoko",
lastname: "Ono",
birthday: "1933-02-18",
nationality: "jp",
bands: ["Rolling Stones"]
}, {
id: 3,
title: "mr",
firstname: "Keith",
lastname: "Richards",
birthday: "1943-12-18",
nationality: "gb",
bands: ["Rolling Stones"]
}, {
id: 4,
title: "mr",
firstname: "Ron",
lastname: "Wood",
birthday: "1947-06-01",
nationality: "gb",
bands: ["Rolling Stones", "The Faces"]
}, {
id: 5,
title: "mr",
firstname: "Paul",
lastname: "McCartney",
birthday: "1942-06-18",
nationality: "gb",
bands: ["The Beatles", "Wings"]
}, {
id: 6,
title: "mr",
firstname: "Mick",
lastname: "Jagger",
birthday: "1943-07-26",
nationality: "gb",
bands: ["Rolling Stones"]
}, {
id: 7,
title: "mr",
firstname: "George",
lastname: "Harrison",
birthday: "1943-02-25",
nationality: "gb",
bands: ["The Beatles"]
}]
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
<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 divbands">
<label>Bands</label>
<br>
<div>
<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>
<br>
<input type="checkbox" id="bands_pob" name="bands" value="Plastic Ono Band">
<label for="bands_pob">Plastic Ono Band</label>
</div>
<div>
<input type="checkbox" id="bands_who" name="bands" value="The Who">
<label for="bands_who">The Who</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> <pre id="rawdata" class="wrapper float"></pre>
<div class="wrapper buttons">
<button id="setInitialData">set initial data</button>
<button id="prev">prev</button>
<button id="next">next</button>
|
<button id="setData">set data</button>
<button id="prevData">prev</button>
<button id="nextData">next</button>
<hr>
<button id="getInitialData">get Initial data</button>
<button id="getData">get data</button>
<button id="getModifiedData">get Modified data</button>
</div>
</form>
External resources loaded into this fiddle: