builder.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <title>work/out form builder</title>
  5. <!-- libs, do not modify. When local than load local libs. -->
  6. <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
  7. <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
  8. <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
  9. <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
  10. <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
  11. <script type="text/javascript" src="/js_libs/util.js"></script>
  12. <script type="text/javascript" src="/js_libs/printf.js"></script>
  13. <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
  14. <script type="text/javascript" src="/js_libs/parsequery.js"></script>
  15. <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
  16. <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
  17. <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
  18. <!---
  19. <link rel='stylesheet' href='../../css/bootstrap.min.css'>
  20. <link rel='stylesheet' href='../../css/formio.full.min.css'>
  21. <link rel='stylesheet' href='../../css/forms.css'>
  22. <script src='../../js/builder.js'></script>
  23. -->
  24. <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  25. <script src='../../js/form-builder.min.js'></script>
  26. <script>
  27. if (location.href.match(/\/$/) == null) {
  28. location.href = location.href + '/';
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <!--
  34. <div id="container" style="--grid-rows:3; --grid-cols:3;">
  35. <div class="grid-item" style="grid-column: 1 / span 2; grid-row: 1 / span 3" ><div id='builder'></div></div>
  36. <div class="grid-item" style="grid-column: 3 / span 1; grid-row: 1 / span 2">
  37. Form Json
  38. <pre id='json'></pre>
  39. </div>
  40. <div class="grid-item" style="grid-column: 3 / span ; grid-row: 3 / span 1" >
  41. <button onclick="saveForm()" name="base">Save Form</button><br>
  42. <button onclick="GetUrl()" name="base">Get Form URL</button>
  43. </div>
  44. <div id='form' style="display: none"></div>
  45. -->
  46. <!-- https://formbuilder.online/ -->
  47. <div id="fb-editor"></div>
  48. <script>
  49. jQuery(function($) {
  50. var options = {
  51. onSave: function(evt, formData) {
  52. JSON.stringify(formData);
  53. $.ajax({
  54. type: "POST",
  55. url: "",
  56. data: JSON.stringify(formData),
  57. headers: {"content-id": "form"},
  58. contentType: "application/json",
  59. success: function(res) {
  60. alert("Saved")
  61. },
  62. error: function (request, status, error) {
  63. alert(request.responseText + status + error);
  64. }
  65. });
  66. },
  67. };
  68. $.ajax({
  69. type: "GET",
  70. url: "../json",
  71. dataType: "json",
  72. success: function(json) {
  73. options["formData"] = json
  74. $(document.getElementById('fb-editor')).formBuilder(options);
  75. },
  76. error: function (request, status, error) {
  77. $(document.getElementById('fb-editor')).formBuilder(options);
  78. }
  79. });
  80. });
  81. </script>
  82. </body>
  83. </html>