How do I post data from a form in AngularJS?
<form data-ng-submit="doSomething()">
<input type="text" data-ng-input="do_obj.text"/>
<input type="email" data-ng-input="do_obj.email"/>
<input type="submit" value="Do something"/>
</form>
$scope.doSomething = function () {
$http({url: '/api/oauth2/register', method: 'POST', data: $scope.do_obj}
).then(function (data, status, headers, config) {
$log.info("data = ", data, "status = ", status,
"headers = ", headers, "config = ", config);
}
);
};
Plnkr (bootstrap styled)
See plunker code here
Changed data-ng-input into data-ng-model and updated data-ng-submit to pass in the model into the scope controller for processing.
HTML:
<body data-ng-app>
<div data-ng-controller="DoCtrl" class="container" style="margin: 15px">
<form data-ng-submit="doSomething(do_obj)" role="form" class="form-inline">
<div class="form-group">
<input type="text" data-ng-model="do_obj.bar"
placeholder="Enter text"
/>
</div>
<div class="form-group">
<input class="form-group" type="email"
data-ng-model="do_obj.email"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<input class="btn btn-lg" type="submit"
data-ng-class="{'btn-info': hover}"
data-ng-mouseenter="hover = true"
data-ng-mouseleave="hover = false"
value="Do something"
/>
</div>
</form>
</div>
</body>
The syntax for posting is $http.post({url}, {payload});. I have updated your controller function to take in a parameter to pass to the post.
Controller code:
function DoCtrl($scope, $http, $log) {
$log.info("In DoCtrl");
$scope.do_obj = {};
$scope.doSomething = function (data) {
$http.post('/api/oauth2/register', data)
.success(function(successData){
console.log(successData);
});
}
}
Related
I am trying to pass expense object to submit function.
But it is not passing entered value
var app = angular.module('addApp', []);
app.controller('addController', function($scope, $http) {
console.log("SAdfasd");
$scope.expense = {param:'',value:0,dt:'',description:''};
$scope.exp = ["One ", "Two", "Three"];
$scope.submit = function(data) {
console.log(data);
console.log($scope.expense);
$http({
method: 'POST',
url: 'added'
data: $scope.expense,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, header, config) {
console.log(data);
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div class="col-lg-8 col-md-8" ng-app="addApp" ng-controller="addController">
<form id="addExpense" name="expenseForm" method="post">
<div>
<label>Expense Type</label>
<select ng-model="expense.param" ng-options="x for x in exp" class="form-control"></select>
</div>
<div>
<label>Amount</label>
<input type="text" name="value" class="form-control" ng-bind="expense.value" placeholder="Enter your expense amount" />
</div>
<div>
<label>Date</label>
<input type="date" name="dt" class="form-control" ng-bind="expense.dt" placeholder="Select expense date" />
</div>
<div>
<label>Description</label>
<textarea rows="4" cols="50" name="description" ng-bind="expense.description" class="form-control" placeholder="Enter your expense description"></textarea>
</div>
<div>
<button type="submit" class="btn btn-success form-control" ng-click="submit(expense)">Save</button>
</form>
</div>
You are using NgBind instead of that it should be NgModel :
var app = angular.module('addApp', []);
app.controller('addController', function($scope, $http) {
$scope.expense=
{param:'',value:0,dt:'',description:''};
$scope.exp = ["One ", "Two", "Three"];
$scope.submit = function() {
//console.log(object);
console.log($scope.expense);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div class="col-lg-8 col-md-8" ng-app="addApp" ng-controller="addController">
<form id="addExpense" name="expenseForm" method="post">
<div>
<label>Expense Type</label>
<select ng-model="expense.param" ng-options="x for x in exp" class="form-control"></select>
</div>
<div>
<label>Amount</label>
<input type="text" name="value" class="form-control" ng-model="expense.value" placeholder="Enter your expense amount" />
</div>
<div>
<label>Date</label>
<input type="date" name="dt" class="form-control" ng-model="expense.dt" placeholder="Select expense date" />
</div>
<div>
<label>Description</label>
<textarea rows="4" cols="50" name="description" ng-model="expense.description" class="form-control" placeholder="Enter your expense description"></textarea>
</div>
<div>
<button type="submit" class="btn btn-success form-control" ng-click="submit(expense)">Save</button>
</form>
</div>
You are sending JSON obejct to your action but it is expecting it in a Url Params. You can refer your query from here ParamSerializer.
So angular provide $httpParamSerializerJQLike service since 1.4.1
$http({
url: 'added',
method: 'POST',
data: $httpParamSerializerJQLike(data), // Make sure to inject the
service in to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // header
}
}).then(function(response) { /* do something here */ });
Second way to do -
$http({
url: 'added',
method: 'POST',
data: 'param='+$scope.expense.param+'&value='+$scope.expense.value+'& dt='+$scope.expense.dt+ '& description='+$scope.expense.description OR 'param='+encodeURIComponent($scope.expense.param)+'&value='+encodeURIComponent$scope.expense.value)+'& dt=+encodeURIComponent$scope.expense.dt)+ '& description='+encodeURIComponent$scope.expense.description)
service in to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // header
}
}).then(function(response) { /* do something here */ });
Please check the syntax's for comma i might have missed .
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.submitForm = function(cl) {
console.log(cl);
$http({
method: 'POST',
url: "updated-profile",
data: {
cl: cl
},
}).then(function successCallback(response) {
console.log("updated successfully");
$scope.success = "Updated successfully";
}, function errorCallback(response) {
console.log("not updated");
$scope.error = "Unable to update";
});
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="cl in clientList">
<div id="error-messages" ng-show="error">{{error}}</div>
<div id="success" ng-show="success">{{success}}</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8 ">
<input type="text" class="form-control" placeholder="First Name" ng-model="cl.fname" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="text " class="form-control" ng-model="cl.lname" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only">Update</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
</div>
</div>
</div>
I am using above code to send data to server.
My server code is
public class Update extends ActionSupport {
private Client cl = new Client();
private String fname;
public String update() {
System.out.println("testing this");
System.out.println("client detail " + cl.getFname() + " " +
cl.getLname());
System.out.println("fname"+getFname());
}
}
I am getting
client detail null null
fnamenull
If I am using data: {fname: cl.fname}, then also fnamenull.
I am unable to pass any value using angular post to action.
What is wrong here?
What changes to made here to work it properly?
Your button
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
has to be inside the ng-repeat loop, otherwise it will not have access to the cl object as that is local to the ng-repeat scope.
Alternatively, if you want the button to be "global", you can submit the entire clientList in the ng-submit and then loop through the array inside your controller. It depends on your flow and what kind of UX/UI you need for the project.
$http({
method: 'POST',
url: "www.mylocalhost.com/api/updated-profile",
data: {
cl: cl
},
});
When you are calling a $http service "url" parameter shoul contain a proper api path. just use a valid api url . I hope it will work.
Or
change "cl":$scope.clientList
I'm trying to make a contact form, and the server side is working pretty well. But I don't know how to connect Angular to the html form and send it with Express. Any would appreciate any help.
My Express
router.get('/sendQuote', function(req, res) {
var data = req.query;
var mailOptions = {
from: 'planacte#gmail.com', // sender address
name: data.contactName,
email: data.contactEmail,
to: data.email, // list of receivers
subject: "Request for a Quote from " + data.contactName, // Subject line
text: data.contactMsg, // plaintext body
html: '<p> email: ' + data.contactEmail +
'</p><p> phone: ' + data.contactPhone + '</p><br>'
+data.contactMsg // html body
};
console.log(mailOptions)
// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
if(error){
return console.log(error);
}
console.log('Message sent: ' + info.response);
});
});
So, my html:
<form id="contact" class="contact-form" ng-submit="sendMail()" novalidate>
<div class="message"></div>
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="name" class="nameform form-control input-lg" placeholder="name" ng-model="contactName" required>
</div>
<div class="form-group">
<input type="email" name="email" class="emailform form-control input-lg" placeholder="email" ng-model="message.contactEmail" required>
</div>
<div class="form-group">
<input type="text" name="phone" class="phoneform form-control input-lg" placeholder="phone" ng-model="message.contactPhone">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="form-group">
<textarea name="message" class="messageform form-control input-lg" placeholder="custom text" ng-model="message.contactMsg" required></textarea>
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<input type="submit" class="btn btn-custom up form-button" value="Send Message">
And the main problem is here, how to glue Angular with HTML and Express. I can send emails, but get undefined in the fields of Name, Email and so on. :
app.controller('MainCtrl', ['$scope', '$interval', '$http', '$location', '$anchorScroll',
function($scope, $interval, $http, $location, $anchorScroll) {
$scope.sendMail = function () {
$scope.message = {};
$http.get('/send/sendQuote', $scope.message).
success(function(data, status, headers, config) {
// $scope.message = data.message;
console.log($scope.message)
});
}
}]);
I think you should start by making this request a POST and not a GET request.
router.post('/sendQuote', function(req, res) {
var data = req.body;
var mailOptions = {
from: 'planacte#gmail.com', // sender address
name: data.contactName,
email: data.contactEmail,
to: data.email, // list of receivers
subject: "Request for a Quote from " + data.contactName, // Subject line
text: data.contactMsg, // plaintext body
html: '<p> email: ' + data.contactEmail +
'</p><p> phone: ' + data.contactPhone + '</p><br>'
+data.contactMsg // html body
};
console.log(mailOptions)
// send mail with defined transport object
transporter.sendMail(mailOptions, function(error, info){
if(error){
return console.log(error);
}
console.log('Message sent: ' + info.response);
res.send(200); // let the client know it sent ok.
});
Now, let's take a look at your Angular code. It seems you want the object $scope.message to hold your form fields data. You should define this as an object at the beginning of your controller.
app.controller('MainCtrl', ['$scope', '$interval', '$http', '$location', '$anchorScroll',
function($scope, $interval, $http, $location, $anchorScroll) {
$scope.message = {};
$scope.sendMail = function () {
//$scope.message = {}; -- this was clearing the object
$http.post('/send/sendQuote', $scope.message).
success(function(data, status, headers, config) {
// you can clear $scope.message if you want here
// $scope.message = data.message;
console.log($scope.message)
});
}
}]);
HTML had one ng-model not binding to the message object:
<form id="contact" class="contact-form" ng-submit="sendMail()" novalidate>
<div class="message"></div>
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="name" class="nameform form-control input-lg" placeholder="name" ng-model="message.contactName" required>
</div>
<div class="form-group">
<input type="email" name="email" class="emailform form-control input-lg" placeholder="email" ng-model="message.contactEmail" required>
</div>
<div class="form-group">
<input type="text" name="phone" class="phoneform form-control input-lg" placeholder="phone" ng-model="message.contactPhone">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="form-group">
<textarea name="message" class="messageform form-control input-lg" placeholder="custom text" ng-model="message.contactMsg" required></textarea>
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<input type="submit" class="btn btn-custom up form-button" value="Send Message">
Please i want to update a specific div in my view instead of reloading the whole page.
This is my Script.
$scope.submitComment = function() {
$http({
url: "comment",
method: "POST",
data: $.param($scope.commentData),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
$scope.loading = true;
//location.reload();
$scope.loading = false;
}).error(function(response) {
console.log(response);
alert('Sorry an error occured');
});
};
This is my view
<div ng-controller="myController">
<br> <br> <br> <br>
<form ng-submit="submitComment()" id="form">
<div class="form-group">
<label for="author">Author: </label>
<input id="author" class="form-control " type="text" ng-model="commentData.author" name="author" placeholder="Enter author">
</div>
<div class="form-group">
<label for="message">Message:</label> #{{ commentData.message }}
<textarea id="message" class="form-control" ng-model="commentData.message" name="message" placeholder="Enter Comment" rows="8" cols="40"></textarea>
</div>
<div class="form-group pull-right">
<button type="submit" class="btn btn-primary"><i class="fa fa-comment-o"> Comment</i></button>
<!-- <input class="btn btn-primary" type="submit" value="Comment"> -->
</div>
</form>
<h2>Comments</h2> <hr>
<div ng-repeat="comment in comments">
<div><strong>#{{ comment.author }}</strong></div>
<div>#{{ comment.message }} <button type="button" ng-click="deleteComment(comment.id)" class="btn btn-danger-outline btn-sm" id="submit">Delete</button></div>
<br>
</div>
</div>
I want to update my form so that the text in it goes. and also update my comments as well. I need a help on this please.
In your $scope.submitComment() method, $http.success(), you need to $scope.comments.push($scope.commentData) and you should be good to go.
$scope.submitComment = function() {
$http({
// ...
}).success(function(response) {
$scope.comments.push($scope.commentData);
});
};
I am new to angularjs, I am trying to use $http.post and want display the response in the same view or different view by using ng-show directive.
Control is coming to success and displaying divsion and immediatly disappearing. Please help me.
Thanks in advance.
var myapp = angular.module('registrationApp', [ 'ngRoute' ]);
// create angular controller
myapp.controller('mainController', function($scope, $http) {
$scope.regStatus =false;
// function to submit the form after all validation has
// occurred
$scope.submitForm = function() {
user = {
"type" : "admin",
"emailid" : $scope.user.email,
};
var res = $http.post('/fosiness-web/services/user/registeruser', user);
res.success(function(data, status, headers, config) {
alert("Success : " + JSON.stringify({
data : data }));
debugger;
$scope.mydata = data;
$scope.regStatus = true;
});
res.error(function(data, status, headers, config) {
alert("failure message: " + JSON.stringify({
data : data
}));
});
}
});
<div class="container" style="background-color: #E8E8E8;"
ng-app="registrationApp" ng-controller="mainController">
...................
<div class="alert alert-success" ng-show="regStatus">
× Success <strong ng- model="user.message.description">{{mydata}} {{regStatus}}</strong>
</div>
<form id="registrationForm" method="post" method="POST"
novalidate
class="form-horizontal registerForm"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-sm-3 control-label">Email-Id</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="email"
ng-model="user.email" data-bv-notempty="true"
data-bv-notempty-message="The email address is required and cannot be empty"
data-bv-emailaddress="true"
data-bv-emailaddress-message="The email address is not a valid" />
</div>
......................
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-info"
ng-click="submitForm()">Sign up</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</div>
</form>
</div>