angularjs serialize form data

Question

i wish to serialize the form data in angularjs. following is the controller code:

   function SearchCtrl($scope, $element, $http) {
        $scope.url = 'php/search.php';
        $scope.submit = function() {
            var elem = angular.element($element);
            //var dt = $(elem.parent()).serialize();
            console.log($(elem.parent()).serialize());
            $http({
                method: 'POST',
                url: $scope.url,
                data: 'first=hgf&last=ghfgh',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data; // Show result from server in our <pre></pre> element
                //var elem = angular.element(e.srcElement);
                //alert($(elem.parent()).serialize());
            }).error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
            return false;
        };
}

edited:

    <!DOCTYPE html>
<html ng-app>
<head>
<title>Search form with AngualrJS</title>
        <script src="../angular-1.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/search.js"></script>



</head>
<body>
        <div>
        <form ng-controller="SearchCtrl" ng-submit="submit()">
            <label>Search:</label>
            <input type="text" ng-model="keywords" placeholder="enter name...">
            <input type="text" ng-model="desc" placeholder="enter description...">
            <button type="submit">Search</button>
            <p>Try for example: "php" or "angularjs" or "asdfg"</p>
        </form>
<pre ng-model="result">
{{result}}
</pre>
   </div>
</body>

</html>

but nothing gets printed on the console. where am i going wrong?

I wonder why $(elem.parent()).serialize()) is used instead of just $(elem).serialize(). Isn't the $element here a <form> one? — raina77ow
– raina77ow, Commented Aug 27, 2012 at 11:48
i tried with $(elem).serialize(), still no result! what shpuld i do? — z22
– z22, Commented Aug 27, 2012 at 11:49

raina77ow · Accepted Answer · 2012-08-27 12:19:06Z

10

From the doc:

For a form element's value to be included in the serialized string, the element must have a name attribute.

In your HTML inputs do not have names, hence serialize returns an empty string. Fix this with something like...

<input type="text" name="keywords" ng-model="keywords" placeholder="enter name...">
<input type="text" name="desc" ng-model="desc" placeholder="enter description...">

And, btw, you don't have to wrap Angular $element into jQuery function: $element.serialize() would work ok.

Demo.

edited Aug 27, 2012 at 12:19

answered Aug 27, 2012 at 12:13

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

1 Comment

z22 Over a year ago

$element.serialize() doesnt work alone, it gives me Object [[object HTMLFormElement]] has no method 'serialize' error in chrome console

Collectives™ on Stack Overflow

angularjs serialize form data

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related