jduplessis294's solution to "Formio - how to post/save JSON output of form?"

in your html:<\/p>\n

<div<\/span> ng-controller =<\/span> &quot;testCtrl&quot;<\/span> ><\/span> \n   <button<\/span> ng-click=<\/span>&quot;runMe()&quot;<\/span>><\/span>Save</button><\/span>\n</div><\/span>\n<\/pre><\/div>\n

in your js:<\/p>\n

var<\/span> <\/span>app<\/span> <\/span>=<\/span> <\/span>angular<\/span>.<\/span>module<\/span>(<\/span>&<\/span>quot<\/span>;<\/span>myapp&quot<\/span>;,<\/span> <\/span>[<\/span>'testModule']);<\/span>\n\napp<\/span>.<\/span>controller<\/span>(<\/span>'testCtrl', ['$scope', '$rootScope',<\/span>\nfunction<\/span>(<\/span>$<\/span>scope<\/span>,<\/span> <\/span>$<\/span>rootScope<\/span>)<\/span> <\/span>{<\/span>\n\n$<\/span>scope<\/span>.<\/span>runMe<\/span> <\/span>=<\/span> <\/span>function<\/span> <\/span>()<\/span> <\/span>{<\/span>\n  <\/span>//<\/span> <\/span>send<\/span> <\/span>to<\/span> <\/span>PHP<\/span> <\/span>server<\/span> <\/span>here<\/span>,<\/span> <\/span>possibly<\/span> <\/span>with<\/span> <\/span>XHR<\/span>.<\/span> <\/span>Below<\/span> <\/span>code<\/span> <\/span>is<\/span> <\/span>just<\/span> <\/span>possibility<\/span>,<\/span> <\/span>may<\/span> <\/span>not<\/span> <\/span>work<\/span>.<\/span> <\/span>But<\/span> <\/span>access<\/span> <\/span>is<\/span> <\/span>available<\/span> <\/span>to<\/span> <\/span>$<\/span>rootScope<\/span>.<\/span>form<\/span>\n  <\/span>var<\/span> <\/span>oReq<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>XMLHttpRequest<\/span>();<\/span>\n  <\/span>oReq<\/span>.<\/span>addEventListener<\/span>(<\/span>&<\/span>quot<\/span>;<\/span>load&quot<\/span>;,<\/span> <\/span>function<\/span> <\/span>()<\/span> <\/span>{});<\/span>\n  <\/span>oReq<\/span>.<\/span>open<\/span>(<\/span>&<\/span>quot<\/span>;<\/span>POST&quot<\/span>;,<\/span> <\/span>&<\/span>quot<\/span>;<\/span>/<\/span>yourscript<\/span>.<\/span>php&quot<\/span>;);<\/span>\n  <\/span>oReq<\/span>.<\/span>send<\/span>(<\/span>$<\/span>rootScope<\/span>.<\/span>form<\/span>);<\/span>\n}<\/span>\n\n}<\/span>\n]);<\/span>\n<\/pre><\/div>\n

Initial solution idea, may not work fully without seeing your existing JavaScript<\/p>\n

EDIT: change js in script tag to angular .module("formBuilder", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer"]) .run([ "$rootScope", 'formioComponents', '$timeout', function( $rootScope, formioComponents, $timeout ) { $rootScope.displays = [{ name: 'form', title: 'Form' }, { name: 'wizard', title: 'Wizard' }]; $rootScope.form = { components: [{ input: true, tableView: true, inputType: 'text', inputMask: '', label: 'First Name', key: 'firstName', placeholder: 'Enter your first name', prefix: '', suffix: '', multiple: false, defaultValue: '', protected: false, unique: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '', customPrivate: false }, conditional: { show: false, when: null, eq: '' }, type: 'textfield' }, { input: true, tableView: true, inputType: 'text', inputMask: '', label: 'Last Name', key: 'lastName', placeholder: 'Enter your last name', prefix: '', suffix: '', multiple: false, defaultValue: '', protected: false, unique: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '', customPrivate: false }, conditional: { show: false, when: null, eq: '' }, type: 'textfield' }, { type: 'select', validate: { required: false }, clearOnHide: true, persistent: true, unique: false, protected: false, multiple: true, template: '{{ item.label }}', authenticate: false, filter: '', refreshOn: '', defaultValue: '', valueProperty: '', dataSrc: 'values', data: { custom: '', resource: '', url: '', json: '', values: [ { label: 'Raindrops on roses', value: 'raindropsOnRoses' }, { label: 'Whiskers on Kittens', value: 'whiskersOnKittens' }, { label: 'Bright copper kettles', value: 'brightCopperKettles' }, { label: 'Warm woolen Mittens', value: 'warmWoolenMittens' }, [ ] ] }, placeholder: 'Select a few', key: 'favoriteThings', label: 'Favorite Things', tableView: true, input: true }, { input: true, tableView: true, label: 'Message', key: 'message', placeholder: 'What do you think?', prefix: '', suffix: '', rows: 3, multiple: false, defaultValue: '', protected: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '' }, type: 'textarea', conditional: { show: false, when: null, eq: '' } }, { type: 'button', theme: 'primary', disableOnInvalid: true, action: 'submit', block: false, rightIcon: '', leftIcon: '', size: 'md', key: 'submit', tableView: false, label: 'Submit', input: true }], display: 'form' }; $rootScope.renderForm = true; $rootScope.$on('formUpdate', function(event, form) { angular.merge($rootScope.form, form); $rootScope.renderForm = false; setTimeout(function() { $rootScope.renderForm = true; }, 10); }); var originalComps = _.cloneDeep($rootScope.form.components); $rootScope.jsonCollapsed = true; $timeout(function() { $rootScope.jsonCollapsed = false; }, 200); var currentDisplay = 'form'; $rootScope.$watch('form.display', function(display) { if (display && (display !== currentDisplay)) { currentDisplay = display; if (display === 'form') { $rootScope.form.components = originalComps; } else { $rootScope.form.components = [{ type: 'panel', input: false, title: 'Page 1', theme: 'default', components: originalComps }]; } } }); } ]) .controller('testCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) { $scope.save = function () { // You have access to $rootScope.form console.log($rootScope.form) } } ]); and add this somewhere above in the html: of your page:
ng-controller = "testCtrl" >
in your js: var app = angular.module("myapp", ['testModule']); app.controller('
testCtrl', ['$scope', '$rootScope', function($scope, $rootScope) { $scope.runMe = function () { // send"> to PHP server here, possibly with XHR. Below code is just possibility, may not work. But access is available to $rootScope.form var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function () {}); oReq.open("POST", "/yourscript.php"); oReq.send($rootScope.form); } } ]); Initial solution idea, may not work fully without seeing your existing JavaScriptng-click="save()">Save
EDIT: change js in script tag to angular .module("formBuilder", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer"]) .run([ "$rootScope", 'formioComponents', '$timeout', function( $rootScope, formioComponents, $timeout ) { $rootScope.displays = [{ name: 'form', title: 'Form' }, { name: 'wizard', title: 'Wizard' }]; $rootScope.form = { components: [{ input: true, tableView: true, inputType: 'text', inputMask: '', label: 'First Name', key: 'firstName', placeholder: 'Enter your first name', prefix: '', suffix: '', multiple: false, defaultValue: '', protected: false, unique: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '', customPrivate: false }, conditional: { show: false, when: null, eq: '' }, type: 'textfield' }, { input: true, tableView: true, inputType: 'text', inputMask: '', label: 'Last Name', key: 'lastName', placeholder: 'Enter your last name', prefix: '', suffix: '', multiple: false, defaultValue: '', protected: false, unique: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '', customPrivate: false }, conditional: { show: false, when: null, eq: '' }, type: 'textfield' }, { type: 'select', validate: { required: false }, clearOnHide: true, persistent: true, unique: false, protected: false, multiple: true, template: '{{ item.label }}', authenticate: false, filter: '', refreshOn: '', defaultValue: '', valueProperty: '', dataSrc: 'values', data: { custom: '', resource: '', url: '', json: '', values: [ { label: 'Raindrops on roses', value: 'raindropsOnRoses' }, { label: 'Whiskers on Kittens', value: 'whiskersOnKittens' }, { label: 'Bright copper kettles', value: 'brightCopperKettles' }, { label: 'Warm woolen Mittens', value: 'warmWoolenMittens' }, [ ] ] }, placeholder: 'Select a few', key: 'favoriteThings', label: 'Favorite Things', tableView: true, input: true }, { input: true, tableView: true, label: 'Message', key: 'message', placeholder: 'What do you think?', prefix: '', suffix: '', rows: 3, multiple: false, defaultValue: '', protected: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '' }, type: 'textarea', conditional: { show: false, when: null, eq: '' } }, { type: 'button', theme: 'primary', disableOnInvalid: true, action: 'submit', block: false, rightIcon: '', leftIcon: '', size: 'md', key: 'submit', tableView: false, label: 'Submit', input: true }], display: 'form' }; $rootScope.renderForm = true; $rootScope.$on('formUpdate', function(event, form) { angular.merge($rootScope.form, form); $rootScope.renderForm = false; setTimeout(function() { $rootScope.renderForm = true; }, 10); }); var originalComps = _.cloneDeep($rootScope.form.components); $rootScope.jsonCollapsed = true; $timeout(function() { $rootScope.jsonCollapsed = false; }, 200); var currentDisplay = 'form'; $rootScope.$watch('form.display', function(display) { if (display && (display !== currentDisplay)) { currentDisplay = display; if (display === 'form') { $rootScope.form.components = originalComps; } else { $rootScope.form.components = [{ type: 'panel', input: false, title: 'Page 1', theme: 'default', components: originalComps }]; } } }); } ]) .controller('testCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) { $scope.save = function () { // () { // You have access to $rootScope.form console.log($rootScope.form) } } ]); and add this somewhere above in the html of your page:
EDIT: change js in script tag to angular .module("formBuilder", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer"]) .run([ "$rootScope", 'formioComponents', '$timeout', function( $rootScope, formioComponents, $timeout ) { $rootScope.displays = [{ name: 'form', title: 'Form' }, { name: 'wizard', title: 'Wizard' }]; $rootScope.form = { components: [{ input: true, tableView: true, inputType: 'text', inputMask: '', label: 'First Name', key: 'firstName', placeholder: 'Enter your first name', prefix: '', suffix: '', multiple: false, defaultValue: '', protected: false, unique: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '', customPrivate: false }, conditional: { show: false, when: null, eq: '' }, type: 'textfield' }, { input: true, tableView: true, inputType: 'text', inputMask: '', label: 'Last Name', key: 'lastName', placeholder: 'Enter your last name', prefix: '', suffix: '', multiple: false, defaultValue: '', protected: false, unique: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '', customPrivate: false }, conditional: { show: false, when: null, eq: '' }, type: 'textfield' }, { type: 'select', validate: { required: false }, clearOnHide: true, persistent: true, unique: false, protected: false, multiple: true, template: '{{ item.label }}', authenticate: false, filter: '', refreshOn: '', defaultValue: '', valueProperty: '', dataSrc: 'values', data: { custom: '', resource: '', url: '', json: '', values: [ { label: 'Raindrops on roses', value: 'raindropsOnRoses' }, { label: 'Whiskers on Kittens', value: 'whiskersOnKittens' }, { label: 'Bright copper kettles', value: 'brightCopperKettles' }, { label: 'Warm woolen Mittens', value: 'warmWoolenMittens' }, [ ] ] }, placeholder: 'Select a few', key: 'favoriteThings', label: 'Favorite Things', tableView: true, input: true }, { input: true, tableView: true, label: 'Message', key: 'message', placeholder: 'What do you think?', prefix: '', suffix: '', rows: 3, multiple: false, defaultValue: '', protected: false, persistent: true, validate: { required: false, minLength: '', maxLength: '', pattern: '', custom: '' }, type: 'textarea', conditional: { show: false, when: null, eq: '' } }, { type: 'button', theme: 'primary', disableOnInvalid: true, action: 'submit', block: false, rightIcon: '', leftIcon: '', size: 'md', key: 'submit', tableView: false, label: 'Submit', input: true }], display: 'form' }; $rootScope.renderForm = true; $rootScope.$on('formUpdate', function(event, form) { angular.merge($rootScope.form, form); $rootScope.renderForm = false; setTimeout(function() { $rootScope.renderForm = true; }, 10); }); var originalComps = _.cloneDeep($rootScope.form.components); $rootScope.jsonCollapsed = true; $timeout(function() { $rootScope.jsonCollapsed = false; }, 200); var currentDisplay = 'form'; $rootScope.$watch('form.display', function(display) { if (display && (display !== currentDisplay)) { currentDisplay = display; if (display === 'form') { $rootScope.form.components = originalComps; } else { $rootScope.form.components = [{ type: 'panel', input: false, title: 'Page 1', theme: 'default', components: originalComps }]; } } }); } ]) .controller('testCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) { $scope.save = function () { // You have access to $rootScope.form console.log(JSON.stringify($rootScope.form) } } ]); )) } } ]); and add this somewhere above in the html of your page:

User: jduplessis294

Question: Formio - how to post/save JSON output of form?

Back to question