Form not submitted through angularjs

Question

I am trying to submit symfony 2.8 form with angularJS scripting

My symfony form twig is as below :

<div ng-app="mediqApp" ng-controller="mediqController">
    {{ form_start(form, {'attr':{'id': 'mediForm', 'ng- submit':'processMediqForm()'}}) }}
    {{ form_row(form.name, {'attr':{'ng-model':'formData.name'}}) }}
    {{ form_row(form.description, {'attr':{'ng-model':'formData.description'}}) }}
    <div><input type="submit" value="Save"/></div>
    {{ form_end(form) }}
 </div>

My angular js script is as below :

var mediqApp = angular.module("mediqApp", []).controller("mediqController",function($scope, $http, $log){
$scope.formData = {};
$scope.processMediqForm = function() {
    $http({
        method  : 'POST',
        url     : "{{ path('medicine_new') }}",
        data    : $.param($scope.formData), 
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        .success(function(data) {
            console.log(data.message);
        });
    };
});

When I am checking my formData value by code console.log($scope.formData) I am getting input value like this Object {name: "Crocin", description: "Help in Headache, little fever"}

But when I am trying to submit form I am getting error like this :

SyntaxError: Unexpected token <
at Object.parse (native)
at pc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:14:219)
at Yb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:76:201)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:77:22
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:7:302)
at Wc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:77:4)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:78:109)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:110:505
at k.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:124:325)
at k.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:121:427)

I am unable to understand what am I doing wrong.

Your url is wrong: url : "{{ path('medicine_new') }}",, it's supposed to be a string, something like: url : "/medicine/new", — Avijit Gupta
– Avijit Gupta, Commented Dec 30, 2015 at 9:43
It is ok because in symfony2 url is passed in this method , finally i have solved my problem , in formData i was passing wrong credential . It is soved . Thanks a lot for help !! — Ajeet Varma
– Ajeet Varma, Commented Dec 30, 2015 at 9:59
@Ajeet you should update your question explaining how you managed to solve your problem! — Avijit Gupta
– Avijit Gupta, Commented Dec 30, 2015 at 17:55

Ajeet Varma · Accepted Answer · 2015-12-31 06:09:12Z

Finally i resolved my problem by following step ..

In symfony 2.8 the for creating a new instant of class, both newAction and createAction method are merged and only one method newMethod is applied .

I broke again them into newAction and createAction just as in prior symfony versions.

in My form twig i do like this:

<div ng-app="mediqApp" ng-controller="mediqController">
  <form method="POST" action="#" name="mediForm">
    {{ form_start(form) }}
    {{ form_row(form.name) }}
    {{ form_row(form.description) }}
    <div><input type="submit" value="Save" ng-click="processMediqForm()"/></div>
    {{ form_end(form) }}
  </form>
</div>

and in angularjs script i do like this:

var mediqApp = angular.module("mediqApp", []).controller("mediqController",function($scope, $http, $log){
        $scope.processMediqForm = function() {
            $http({
                method: 'POST',
                url: "{{ path('medicine_create') }}",
                data: $('form[name=mediForm]').serialize(),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
              }).success(function(response) {
                $scope.result = response.data;
                console.log($scope.result);
              });
            }
        });

I basically pass the input data as form serialize data . Now it works very fine ..

Again thanks to all for their advice ...

Collectives™ on Stack Overflow

Form not submitted through angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related