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 = "sirat.15@gmail.com";
$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>
3 answers
solution1
0 ACCPTED 2017-01-24 10:39:42
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: "sirat.15@gmail.com", 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>
solution2
0 2017-01-24 10:39:56
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
};
solution3
0 2017-01-24 10:41:43
First initialize user object with your initial data.
var user = {
first_name:"bht",
last_name:"$sh",
email_id:"sirat.15@gmail.com",
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
$http.post from angular form not sending any data
Angular http.post not sending data with subscribe
Angular $http.post not sending any data
$http.post data from modal form (angular)
$http in Angular how to post from form data in to nodejs
Html form not sending data in post request
Sending data by html form (POST method)
Reading data from database and setting data to value in input type in html
Sending POST data from one form with 2 buttons
Sending http post request to php with many data using angular
Related Tags