Sunday, 15 April 2012

Drupal: How to submit the webfrom from REST services using AJAX POST -



Drupal: How to submit the webfrom from REST services using AJAX POST -

i having web form module in drupal. want submit form webform external app rest service using ajax post method. can able retrieve web form (node/1) using ajax. on submitting should not create new node, instead add together web form.

thanks in advance help.....

to able retrieve info , send info webform module external application suggest utilize webform service module of drupal makes rest api available surveys.

once you've installed , configured modules , dependencies (if any) you'll able retrieve serialized info of survey. can send submission appropriate request endpoint proper http method (get, post etc..). see description of endpoints on the page of webform service module.

you need know format of info going submit. hereby find right format of json object. value of values key array either has 1 or more values, of time looks this:

{'values':{0:"put value here"}}

in case of multiple values (checkbox, multi-select) possible utilize values this:

{'values':{ 0:"put value1 here", 1: "put value2 here", }}

finally here snippet of html , angularjs prepare , post request rest api.

html

<form ng-submit="submit('put uuid of survey here')" ng-controller="formctrl"> <label>your name:</label><br/> <input type="text" ng-model="formdata[1]['values'][0]" /><br/> <label>i tea</label><br/> <input type="checkbox" ng-model="formdata[2]['values'][0]" value="tea" /><br/> <label>i coffee</label><br/> <input type="checkbox" ng-model="formdata[2]['values'][1]" value="coffee" /><br/> <input type="submit" value="send" /> </form>

note don't need write static html form, can retrieve info of survey api , build form script.

javascript

var app = angular.module('webformapp', []); app.config(['$httpprovider', function($httpprovider) { $httpprovider.defaults.usexdomain = true; delete $httpprovider.defaults.headers.common['x-requested-with']; } ]); app.controller('formctrl', function($scope, $element, formservice) { $scope.submit = function(uuid){ formservice.postform(uuid, this); }; }); app.service('formservice', function($http){ homecoming { postform: function(uuid, $scope){ var topost = { webform: uuid, submission: { data: $scope.formdata } }; console.log(topost); console.log(json.stringify(topost)); homecoming $http.post('http://example.com/yourendpoint/submission', topost); } }; });

to try/test api can utilize postman extension of chrome browser. js log json string console send api.

have fun!

ajax rest drupal-7

No comments:

Post a Comment