<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Element Configuration</title>
</head>
<body>
<label>Refresh URL
<select name="refreshUrl" id="refreshUrl">
<option>404 error</option>
<option>form_refresh.json</option>
<option>form_refresh_error.json</option>
</select>
</label>
<div style="float: right">
<pre id="sample">
[
{
"form-element": "text",
"value": "value. Now its enabled",
"disabled": false,
"readonly": true
},
{
"form-element": "select",
"value": [
{
"value": 100,
"text": "a",
"selected": true
},
{
"value": 200,
"text": "b",
"selected": false
}
]
},
{
"form-element": "radio",
"value": "a",
"disabled": false
},
{
"form-element": "checkbox",
"value": true,
"readonly": true
},
{
"form-element": "trigger",
"value": false
}
]
</pre>
<button id="copy">Copy</button>
</div>
<p>
<textarea name="configuration" rows="20" cols="80" id="configuration"></textarea>
</p>
<p>
<button id="applyconfig">Apply</button>
</p>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<form id="myForm" class="form-horizontal" data-toggle="validator">
<div class="form-group">
<div class="col-md-2">
<label for="text" class="control-label">Text input (name: text)</label>
</div>
<div class="col-md-6">
<input id="text" type="text" class="form-control" name="text" data-disabled="true">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="select" class="control-label">Select (name: select)</label>
</div>
<input type="hidden" name="select">
<div class="col-md-6">
<select id="select" class="form-control" name="select">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="textarea" class="control-label">Text Area (name: textarea)</label>
</div>
<div class="col-md-6">
<textarea id="textarea" name="textarea"></textarea>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Radio (name: radio)
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="radio" value="a">a
</label>
</div>
<input type="hidden" name="radio">
<div class="radio">
<label>
<input type="radio" name="radio" value="b">b
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox (name: checkbox)
</b>
</div>
<div class="col-md-6">
<input type="hidden" name="checkbox">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox" name="checkbox" data-hidden="no">
</label>
<p class="help-block"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Data reload trigger
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox2" name="trigger" data-load="">
</label>
<p class="help-block">
Changing the value of this checkbox triggers reload
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox 3 test
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input name='checkbox3_1' type="checkbox" value="reminder_value">
</label>
</div>
<div class="checkbox">
<label>
<input name='checkbox3_2' type="checkbox" value="reminder_value">
</label>
</div>
<div class="checkbox">
<label>
<input name='checkbox3_3' type="checkbox" value="reminder_value">
</label>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
var form = new QfqNS.QfqForm("myForm", 'none', 'none', 'api/' + $("#refreshUrl").val());
QfqNS.Log.level = 0;
$("#applyconfig").click(function () {
var configAsText = $("#configuration").val();
var configAsJson = JSON.parse(configAsText);
form.applyFormConfiguration(configAsJson);
});
$("#copy").click(function () {
$("#configuration").val($("#sample").text());
});
$("#refreshUrl").on("change", function (evt) {
form.dataRefreshUrl = 'api/' + $(evt.target).val();
});
});
</script>
</body>
</html>