<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>work/out form builder</title>
<!-- libs, do not modify. When local than load local libs. -->
<script type="text/javascript" src="/js_libs/jquery.min.js"></script>
<script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
<script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
<script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
<script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
<script type="text/javascript" src="/js_libs/util.js"></script>
<script type="text/javascript" src="/js_libs/printf.js"></script>
<script type="text/javascript" src="/js_libs/strftime.min.js"></script>
<script type="text/javascript" src="/js_libs/parsequery.js"></script>
<script type="text/javascript" src="/js_libs/underscore.min.js"></script>
<script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
<!---
<link rel='stylesheet' href='../../css/bootstrap.min.css'>
<link rel='stylesheet' href='../../css/formio.full.min.css'>
<link rel='stylesheet' href='../../css/forms.css'>
<script src='../../js/builder.js'></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src='../../js/form-builder.min.js'></script>
<script>
if (location.href.match(/\/$/) == null) {
location.href = location.href + '/';
}
</script>
</head>
<body>
<!--
<div id="container" style="--grid-rows:3; --grid-cols:3;">
<div class="grid-item" style="grid-column: 1 / span 2; grid-row: 1 / span 3" ><div id='builder'></div></div>
<div class="grid-item" style="grid-column: 3 / span 1; grid-row: 1 / span 2">
Form Json
<pre id='json'></pre>
</div>
<div class="grid-item" style="grid-column: 3 / span ; grid-row: 3 / span 1" >
<button onclick="saveForm()" name="base">Save Form</button><br>
<button onclick="GetUrl()" name="base">Get Form URL</button>
</div>
<div id='form' style="display: none"></div>
-->
<!-- https://formbuilder.online/ -->
<div id="fb-editor"></div>
<script>
jQuery(function($) {
var options = {
onSave: function(evt, formData) {
JSON.stringify(formData);
$.ajax({
type: "POST",
url: "",
data: JSON.stringify(formData),
headers: {"content-id": "form"},
contentType: "application/json",
success: function(res) {
alert("Saved")
},
error: function (request, status, error) {
alert(request.responseText + status + error);
}
});
},
};
$.ajax({
type: "GET",
url: "../json",
dataType: "json",
success: function(json) {
options["formData"] = json
$(document.getElementById('fb-editor')).formBuilder(options);
},
error: function (request, status, error) {
$(document.getElementById('fb-editor')).formBuilder(options);
}
});
});
</script>
</body>
</html>