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/

How are you binding data to your form? Can you show the form markup? — Davin Tryon
– Davin Tryon, Commented Dec 2, 2013 at 9:37

Davin Tryon · Accepted Answer · 2013-12-02 11:01:35Z

2

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.

edited Dec 2, 2013 at 11:01

answered Dec 2, 2013 at 10:21

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anonymous Over a year ago

I don't see your updated jsFiddle.Btw, have added a more reallife CakePHP jsFiddle link to explain the condition. I need to serialize it including the hidden token

Anonymous Over a year ago

your jsfiddle is just the standard angular way of doing the problem. Needa passback data in something like _method=POST&data%5B_Token%5D%5Bkey%5D=a5b339e9083ae1a4cc675f27bf7fa820a9ccfbac&data%5B_Token......

Anonymous Over a year ago

my version 2 jsFiddle link explained the situation

Muhammad bin Yusrat Over a year ago

How do you serialize a form?

Dan Atkinson · Accepted Answer · 2014-04-04 10:14:01Z

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.

edited Apr 4, 2014 at 10:14

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Dec 20, 2013 at 20:02

Juan Solano

1,2001 gold badge17 silver badges34 bronze badges

3 Comments

Anonymous Over a year ago

pardon me you're still specifying the model binding in your plunker example, and somehow this doesn't work with hidden input ( unless you change it with display:none )

Juan Solano Over a year ago

I have misunderstood you. See the update to see if this time i can help you.

Anonymous Over a year ago

the answer I provided below is using event, well I love hybrid things. Since this is for the CakePHP so it should follow the KISS theory ( although I'm integrating with new framework currently )

Community · Accepted Answer · 2017-05-23 12:30:31Z

1

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());
    }
});

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Dec 3, 2013 at 11:07

Anonymous

1,4454 gold badges17 silver badges26 bronze badges

Collectives™ on Stack Overflow

angularJs on ng-submit serialize form (ajax way)

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related