Skip to content

Instantly share code, notes, and snippets.

@wiless

wiless/events.json

Created November 17, 2018 07:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wiless/88a37d9f6d156ccb911582a8c82cb564 to your computer and use it in GitHub Desktop.
Save wiless/88a37d9f6d156ccb911582a8c82cb564 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
events.json
{
"schema": {
"text": {
"type": "string",
"title": "Enter some text"
}
},
"form": [
{
"key": "text",
"onChange": function (evt) {
var value = $(evt.target).val();
if (value) alert(value);
}
},
{
"type": "button",
"title": "Click me",
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting started with JSON Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<h1>Getting started with JSON Form</h1>
<div class="col-md-8">
<div id="inputform" class="well row">
<!-- <div style="margin:10px;padding:2px;border:2px"> -->
<form></form>
</div>
</div>
<div class="col-md-4">
<div id="" class="well">
This is a place for Understanding the allocations of IND Foot notes
</div>
<div id="result" class="bg-warning" style="word-wrap:break-word">
</div>
</div>
</div>
<div id="res" class="alert"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/jsv.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-wysihtml5.js"></script>
<script src="js/spectrum.js"></script>
<script src="js/jquery.transloadit2.js"></script>
<script type="text/javascript">
var myproperties;
var jschema;
var formlayout;
var pvsvalues;
$.getJSON("events.json", function (json) {
console.info(json);
jschema = json;
myproperties = json.schema;
formlayout = json.form;
console.info(json);
loadform()
});
function loadform() {
// template: '<%=node.value%>'
myform = $('form').jsonForm({
schema: myproperties,
form: formlayout,
value: pvsvalues,
prefix: "ssk",
onSubmit: function (errors, values) {
if (errors) {
$('#res').html('<p>I beg your pardon?</p>');
console.log(errors);
} else {
pvsvalues = values;
console.log(values);
$("#result").html(JSON.stringify(values));
}
}
});
}
</script>
<script type="text/javascript" src="js/jsonform.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment