Embedded Systems LogicMachine5 - Page 58

58
Example (config.html)
Create a simple for element with single numeric input which accepts values in 0..100 range
<form id="myapp-config">
<div class="form-group">
<label for="myapp-input">Numberic input</label>
<input type="number" name="input" id="myapp-input" class="form-control" min="0"
max="100">
</div>
</form>
<script>
(function() {
var el = $('#myapp-config') // form element
, input = $('#myapp-input'); // input element
// set element values when config is loaded
el.on('config-load', function(event, data) {
$.each(data, function(key, value) {
$('#myapp-' + key).val(value);
});
});
// runs when Save button is clicked
el.on('config-check', function() {
var val = parseInt(input.val(), 10) // input value
, min = parseInt(input.attr('min'), 10) // minimum value
, max = parseInt(input.attr('max'), 10); // maximum value
// invalid value
if (isNaN(val) || val < min || max < val) {
alert('Please enter a value between ' + min + ' and ' + max);
}
// all good, save configuration
else {
el.triggerHandler('config-save', { input: val });
}
});
})();
</script>