angularJs on ng-submit serialize form (ajax way)

Question

First of all, my back-end is using cakePHP 2.3 so I will like to have ajax way serialize all.

currently i have a form to test if serialize function working

//index
<http ng-app="app">...
<div ng-controller="appCtrl" ng-model='data'>...
<form ng-submit="helloWorld(this)" onsubmit="event.returnValue = false; return false;">
...</form><div></http>

//app.js
var app = angular.module('app', []);
app.controller("appCtrl", function($scope){
    $scope.helloWorld = function(element){
        console.log(element);
    }
});

however it just return a bunch of item. tried $(element.target).serialize() but it cannot work. Finding an equivalent way of doing data: $(element.target).serialize() .

JsFiddle at http://jsfiddle.net/eX7fB/

version 2 for explain http://jsfiddle.net/eX7fB/1/

Solution 1

Here is an updated jsfiddle.

In order to pull form data out of an angular form, it is best to use name your form and use ng-model on the input elements:

HTML:

<form name="form1" ng-submit="helloWorld()">
    <input name="color" ng-model="color" type="text">
    <input name="range" ng-model="range" type="text">
    <input type="submit" value="submit">
 </form>

JS:

$scope.helloWorld = function(){
    console.log($scope.form1);
    console.log($scope.color);
    console.log($scope.range);
    alert($scope.form1);
    alert($scope.color);
    alert($scope.range);
}

Documentation for forms is here.

Solution 2

I have found the easiest way to get form data is by creating an object that will contain all the models of the form. Since you don't need to specify each model from the controller you can just create an empty object that will eventually contain all the form information.

app.controller('MainCtrl', function($scope) {
  $scope.form = {};
  $scope.submitform = function(){
     console.log($scope.form)
  }
});

You do have to specify the model bindings in the HTML <input type="text" ng-model="form.name"> but now the form object will contain other object called name.

You can now pass the form object to ajax data.

Check this plunker to see the example I have created. Hope this helps.

UPDATE

Hi there. Ok I probably misunderstood your question. If you really need to serialise the form check this fiddle to see if that is what your looking for. You have to pass the $event object in ng-submit and not this, and then you can treat the event with normal jQuery stuff. Although I really doubt this is a good practice.

Solution 3

I've make you a alternative method of serialize referring to Getting attribute of element in ng-click function in angularjs

Though some may said that this is not angular way, but since you are using cakePHP as back end, why not just Keep It Simple Silly.( saving lots of space from adding ng-model and rebuilding the form-helper. And saved lots of space.

//index
<http ng-app="app">...
<div ng-controller="appCtrl" ng-model='data'>...
<form ng-submit="helloWorld($event)" onsubmit="event.returnValue = false; return false;">
...</form><div></http>

//app.js
var app = angular.module('app', []);
app.controller("appCtrl", function($scope){
    $scope.helloWorld = function(obj){
        console.log(obj);
        alert($(obj.target).serialize());
    }
});