sending data in angular http post by collecting data value from html form input type text

Question

I am trying to post data by using angular HTTP post method. My requirement is once the form is field than on clicking the Submit button the HTTP post method is called by collecting all the field input value. I have been tried this simple snippets code, but don't know how to collect form field value and then calling the HTTP post method.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title> Simple Signup page</title>
</head>

<body>
    <h1><b>signup</b></h1>
    <form ng-controller="signupController">

        First Name:<input type="text" ng-model="first_name" placeholder="enter first_name"><br>
        <br> Last Name:<input type="text" ng-model="last_name" placeholder="enter last_name"><br>
        <br> Email-id:
        <input type="text" ng-model="email_id" placeholder="enter email_id"><br>
        <br> User-id:
        <input type="text" ng-model="user_id" placeholder="enter user_id"><br>
        <br> Password:
        <input type="text" ng-model="password" placeholder="enter password"><br>
        <br> Mobile:
        <input type="text" ng-model="mobile" placeholder="enter mobile"><br>
        <br>

        <input type="button" ng-click="Signup(user)" name="name" value="Signup" </form>
        <script src="script2.js"></script>
        <script>
            function signupController($scope, $http) {
                $scope.first_name = "bht";
                $scope.last_name = "sh";
                $scope.email_id = "[email protected]";
                $scope.user_id = "bh5";
                $scope.password = "root";
                $scope.mobile = "8145455547";
                // trying to store data in user object
                var user = {
                    first_name: "$scope.first_name",
                    last_name: "$scope.last_name",
                    email_id: "$scope.email_id",
                    user_id: "$scope.user_id",
                    password: "$scope.password",
                    mobile: "$scope.mobile"
                };
                console.log("user array is:", user);
                $scope.Signup = function(user) {
                    $http.post("http://localhost:1430/user/signup/user?tableName=signup", user).success(function(user) {
                        user.data
                    });
                };
            };
            var myApp = angular.module("myApp", []);
            myApp.controller("signupController", signupController);
        </script>
</body>

</html>

Weedoze · Accepted Answer · 2017-01-24 10:39:42Z

You can store your variable inside the user object like this

function signupController($scope, $http) {
  $scope.user = {
    first_name: "bht",
    last_name: "sh",
    email_id: "[email protected]",
    user_id: "bh5",
    password: "root",
    mobile: "8145455547"
  };

  $scope.Signup = function() {
    $http.post("http://localhost:1430/user/signup/user?tableName=signup", $scope.user)
      .success(function(user) {
        //handle success
      });
  };
};

var myApp = angular.module("myApp", []);
myApp.controller("signupController", signupController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <h1><b>signup</b></h1>
  <form ng-controller="signupController">

    First Name:
    <input type="text" ng-model="user.first_name" placeholder="enter first_name">
    <br>
    <br>Last Name:
    <input type="text" ng-model="user.last_name" placeholder="enter last_name">
    <br>
    <br>Email-id:
    <input type="text" ng-model="user.email_id" placeholder="enter email_id">
    <br>
    <br>User-id:
    <input type="text" ng-model="user.user_id" placeholder="enter user_id">
    <br>
    <br>Password:
    <input type="text" ng-model="user.password" placeholder="enter password">
    <br>
    <br>Mobile:
    <input type="text" ng-model="user.mobile" placeholder="enter mobile">
    <br>
    <br>
    <input type="button" ng-click="Signup()" name="name" value="Signup" />

  </form>
</body>

Dario · Accepted Answer · 2017-01-24 10:39:56Z

0

You are assigning strings to your user object properties; just change your code to:

var user = {
    first_name: $scope.first_name,
    last_name: $scope.last_name,
    email_id: $scope.email_id,
    user_id: $scope.user_id,
    password: $scope.password,
    mobile: $scope.mobile
};

answered Jan 24, 2017 at 10:39

Dario

6,3009 gold badges42 silver badges53 bronze badges

Comments

Kursad Gulseven · Accepted Answer · 2017-01-24 10:41:43Z

First initialize user object with your initial data.

var user = {
    first_name:"bht",
    last_name:"$sh",
    email_id:"[email protected]",
    user_id:"bh5",
    password:"root",
    mobile:"8145455547"
};

Then, use this object in your HTML.

First Name:<input type="text" ng-model="user.first_name" placeholder="enter first_name"><br>
<br>
Last Name:<input type="text" ng-model="user.last_name" placeholder="enter last_name"><br>
<br>
Email-id:<input type="text" ng-model="user.email_id" placeholder="enter email_id"><br>
<br>
User-id:<input type="text" ng-model="user.user_id" placeholder="enter user_id"><br>
<br>
Password:<input type="text" ng-model="user.password" placeholder="enter password"><br>
<br>
Mobile:<input type="text" ng-model="user.mobile" placeholder="enter mobile"><br>

Collectives™ on Stack Overflow

sending data in angular http post by collecting data value from html form input type text

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related