Pulling values from a form in AngularJS doesn't appear to be working - for example my form code is:
<form ng-submit="newCompany()">
<div class="form-group">
<label>Name</label><input type="text" name="company_name" id="company_name" tabindex="2" ng-model="newCompany.company_name" class="form-control">
<label>Primary Contact</label><input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control">
<label>Address</label><input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control">
<label>Function</label><input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control">
<label>Telephone</label><input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control">
<label>Fax</label><input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control">
<label>URL</label></label><input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="add-submit" id="add-submit" tabindex="10" class="form-control btn btn-primary" value="Add Company">
<br>
<div class="text-center">
<p ng-show="addCompany"><span class="label label-info">{{ addCompany }}</span></p>
</div>
</div>
</div>
</div>
</form>
But in the controller, doing newCompany.name or $scope.newCompany.name, doesn't work. It returns nothing and says newCompany is undefined.
Controller:
app.controller("CompaniesController", ['$scope', 'Companies', function($scope, Companies) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.companyData = {
company_name: newCompany.company_name,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
};
$scope.addCompany = function() {
var company = new Companies($scope.companyData);
company.$save();
};
$scope.companies = Companies.query();
}]);
Can anybody see what is wrong or how to get it to work?
Yes newCompany is undefined please define it before use will solve your problem
$scope.newCompany = {};
$scope.companyData = {
company_name: newCompany.company_name,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
};
and also you don't need to use $scope.companyData just use newCompany inside your save function
$scope.addCompany = function() {
var company = new Companies($scope.newCompany);
company.$save();
};
if you see in console using console.log(newCompany) after submit data it already there with key value pair as you trying to create with your $scope.companyData
Related
I am trying to implement a payment integration on my web; now after going with the sample code i was able to develop the first phase which is the payment collection and processing.
Now my issue here is how do i display the payment detail on another page when it is successful as it redirects there
<div class="row">
<div class="col-75">
<div class="container">
<form method="POST" id="payment-form">
<div class="row">
<div class="col-50-left">
<h3>Billing Information</h3>
<label for="fname"><i class="fa fa-user"></i> First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="First Name" required="">
<label for="fname"><i class="fa fa-user"></i> Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Last Name">
<label for="adr"><i class="fa fa-money"></i> Amount</label>
<input type="number" id="amount" name="amount" placeholder="NGN 20000">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="Benin City">
</div>
<div class="col-50">
<div class="icon-container">
<img src="assets/images/remita-payment-options.png" style="width: 100%;">
</div>
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="email" id="email" name="email" placeholder="john#example.com">
<label for="adr"><i class="fa fa-phone"></i> Phone</label>
<input type="text" id="phone" name="phone" placeholder="+234 XXX XXX XXXX">
<label for="city"><i class="fa fa-comment"></i> Narration</label>
<input type="text" id="narration" name="narration" placeholder="Donation">
</div>
</div>
<button type="button" class="btn" onclick="makePayment();"> Pay </button>
</form>
</div></div></div>
<script>
var date = new Date();
var timestamp = date.getTime();
var form = document.querySelector("#payment-form");
function makePayment() {
var paymentEngine = RmPaymentEngine.init({
key: 'RzAwMDAyMjg5NTl8NDMwNjUxNDd8ZmM4MDg5Yjc3M2Y5ZTk0YWViMDJkMmRmMDVhYmI2MjAwMWVhYjNjY2I5NmU0ZWU3MzBiNTMwYzNlOGEzYTYyMTc2ODM1NzBkYmI4MmI3MTE1ZmUxMzkxYTg0MzZhYjM0ODlkY2U0NzZiMTE4OWU0YTNjMjA1MGJjY2UyNzNkN2I=',
customerId: form.querySelector("#email").value,
firstName: form.querySelector("#firstname").value,
lastName: form.querySelector("#lastname").value,
email: form.querySelector("#email").value,
amount: form.querySelector("#amount").value,
transactionId: timestamp,
narration: form.querySelector("#narration").value,
phone: form.querySelector("#phone").value,
city: form.querySelector("#city").value,
onSuccess: function (response) {
console.log('callback Successful Response', response);
console.log('Amount', response.amount);
console.log('TransactionId: ', response.transactionId);
console.log('RRR: ', response.paymentReference);
/*How do i display these data on the save_live.html page
RRR:
TransactionId:
Amount:
when it redirects there*/
window.localStorage.setItem("globaly", JSON.stringify(response));
window.location.href = 'save_live.html';
},
onError: function (response) {
console.log('callback Error Response', response);
},
onClose: function () {
form.reset();
console.log("closed");
}
});
paymentEngine.showPaymentWidget();
}
</script>
<script type="text/javascript" src="https://remitademo.net/payment/v1/remita-pay-inline.bundle.js"></script>
This is the save_live.html page script below and what i have tried doing
<div class="row">
<div class="col-75">
<div class="container" id="paid">
</div></div></div>
<script>
$(document).ready(function(){
$.getJSON("index.html", function(data){
var payment_data = '';
$.each(data, function(key, value){
payment_data += '<div>';
payment_data += '<p>'+value.paymentReference+'</p>';
payment_data += '<p>'+value.amount+'</p>';
payment_data += '<p>'+value.transactionId+'</p>';
payment_data += '</div>';
})
$('#paid').append(payment_data);
});
});
</script>
How you run the above pages?
Let's use the localhost server, use localStorage.setItem to save, and use localStorage.getItem to get it in the same domain.
(function() {
var app = angular.module('snc', []);
app.controller("QueryController", function($http) {
this.query = {};
this.sendQuery = function(contact) {
contact.querys.push(this.query);
this.query = {};
};
});
})();
<form name="queryForm" ng-controller="QueryController as queryCtrl" ng-submit="queryForm.$valid && queryCtrl.sendQuery(contact)" novalidate>
<blockquote>
<b>Name: {{queryCtrl.query.name}}</b><br/>
<b>Mobile: {{queryCtrl.query.mobile}}</b><br/>
<b>Eamil: {{queryCtrl.query.email}}</b><br/>
<b>Message: {{queryCtrl.query.message}}</b><br/>
</blockquote>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="queryCtrl.query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div class="form-group">
<label for="Mobile">Mobile:<span class="required">*</span></label>
<input type="number" ng-model="queryCtrl.query.mobile" class="form-control" id="mobile" placeholder="Enter Your Mobile Number" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" ng-model="queryCtrl.query.email" class="form-control" id="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea type="text" ng-model="queryCtrl.query.message" class="form-control" id="name" placeholder="Enter Your Message" rows="4" required></textarea>
</div>
<div> reviewForm is {{queryForm.$valid}} </div>
<button type="submit" class="btn btn-snc">Submit</button>
</form>
I'm Using ng-app="snc" and Angularjs version 1.6, this is a simple contact form please check it and give me some advice. i want to send contact form into php page, where i use form data for send email for query and add it into database.
Try this code sample code
(function() {
var app = angular.module('snc', []);
app.controller('QueryController', function($scope, $http) {
$scope.query = {};
$scope.submit = function() {
console.log($scope.query);
$http({
method: "POST",
url: "", //php url
data: {
query
}
}).then(function mySuccess(response) {
console.log(response);
}, function myError(response) {
console.log(response);
});
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-app="snc" ng-controller="QueryController">
<b>Name: {{query.name}}</b><br/>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div> reviewForm is {{fromvalue.$valid}} </div>
<button type="submit" ng-click="submit()" class="btn btn-snc">Submit</button>
</form>
This is my script File..
app.controller('userController', function PostController($scope, userFactory) {
$scope.users = [];
$scope.user = { items : [] , attributes : [] };
$scope.editMode = false;
$scope.addItem = function (index) {
$scope.user.items.push({
Name: $scope.newItemName,
Value: $scope.newItemValue
});
};
$scope.deleteItem = function (index) {
$scope.user.items.splice(index, 1);
};
}
This is my HTML file
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.Name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.Address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.ContactNo" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" />
</div>
</div>
<div class="form-group">
<ul class="nav" class="col-sm-2" >
<label for="title" class="col-sm-2 control-label">Variations</label>
<div class="col-sm-10">
<input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemName" required placeholder="Name of new item...">
<input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemValue" required placeholder="Value of new item...">
</div>
<div class="col-sm-offset-3">
<button ng-click="addItem()" class="btn btn-primary" >Add Me</button>
<table class="table table-hover">
<tr data-ng-repeat="item in user.items">
<td>
<p>{{item.Name}}</p>
</td>
<td>
<p>{{item.Value}}</p>
</td>
<td>
<a ng-click="deleteItem($index)" class="delete-Item">x</a>
</td>
</tr>
</table>
</div>
</ul>
</div>
My doubt is that whenever I click addItem it will be stored as Name : "xxx", Value: "yyy", but i want it to be stored as xxx : yyy. Is there a way to do that. Im new to angular js. Please help me. Thank you
Try using this code in your addItem method:
$scope.addItem = function (index) {
var newItem = {};
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
In this code you first create an object for new item, and then create the property from newItemName and assign it a value from field newItemValue. Then you push this to an array.
One issue with this approach is that your bindings like <p>{{item.Name}}</p> will not work, because there is no property called Name anymore. I don't know why you want to store the data in the format you described, but in order to make the old bindings work you could also use old properties as well:
$scope.addItem = function (index) {
var newItem = {Name: $scope.newItemName, Value: $scope.newItemValue };
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
Use a map instead of a list for the items:
$scope.user = { items : {} , attributes : [] };
$scope.user.items[$scope.newItemName] = $scope.newItemValue;
I am trying to follow John Papa's Angular Style Guide however i cannot get the model data of input file with ngClick.
When i try with $scope everything works just fine.
Here is the Demo on Plnkr.
Glad for your help.
In the ng-model instead of assigning directly to vm, assign it to vm.data and pass vm.data as argument to ng-click like data-ng-click="vm.saveEvent(vm.data)"
<form>
<fieldset>
<div class="form-group">
<label for="eventName">Event Name:</label>
<input id="eventName" type="text" data-ng-model="vm.data.name" placeholder="Name of your event"/>
</div>
<div class="form-group">
<label for="eventDate">Event Date:</label>
<input id="eventDate" type="text" data-ng-model="vm.data.date" placeholder="format (mm/dd/yyyy)"/>
</div>
<div class="form-group">
<label for="eventTime">Event Time:</label>
<input id="eventTime" type="text" data-ng-model="vm.data.time" placeholder="Time of your event"/>
</div>
<div class="form-group">
<label for="eventLocation">Event Location:</label>
<input id="eventLocation" type="text" data-ng-model="vm.data.location.addresss" placeholder="Address of your event"/>
</div>
<div class="form-group">
<input id="eventCity" type="text" class="input-small" data-ng-model="vm.data.location.city" placeholder="City"/>
<input id="stateProvince" type="text" class="input-small" data-ng-model="vm.data.location.province" placeholder="Province"/>
</div>
<div class="form-group">
<label for="eventImageUrl">Image:</label>
<input id="eventImageUrl" type="text" class="input-xlarge" data-ng-model="vm.data.imageUrl" placeholder="Url of image"/>
</div>
</fieldset>
{{vm.data.name}}
<img data-ng-src="{{vm.data.imageUrl}}"/>
<br/>
<br/>
<div class="form-group">
<button type="submit" class="btn btn-primary" data-ng-click="vm.saveEvent(vm.data)">Save</button>
<button type="button" class="btn btn-default" data-ng-click="vm.cancelEvent(vm.data)">Cancel</button>
</div>
</form>
Controller:
eventsApp.controller('EditEventController',
function EditEventController() {
var vm = this;
this.data = {};
vm.saveEvent = saveEvent;
function saveEvent(event) {
window.alert("event" + event.name + ' saved');
console.log(vm.data);
}
//vm.saveEvent = function(event) {
// window.alert("event" + event.name + ' saved');
//};
}
);
http://plnkr.co/edit/AxdA7vc70aTw3RojofVY?p=preview
ng-click="vm.saveEvent(vm.data)" did not work for me with Angular 1.4.
My solution was to use the control variable name.
e.g. "LoginController as loginctrl" so <button ng-click="loginctrl.doLogin()">Login</button>
Then in my control I was able to use this for the doLogin function inside my LoginController:
/* #ngInject */
function LoginController() {
/*jshint validthis: true */
var vm = this;
vm.title = 'Login';
function doLogin() {
...
}
I'm having trouble resetting form fields after submitting in AngularJS (v1.1.3). Here's a snippet of what I'm trying to do:
HTML
<form name="addMemberForm">
<input name="name" type="text" placeholder="Jon Doe" ng-model="member.name" required/></td>
<a class="btn btn-primary" ng-click="createMember(member)" ng-disabled="addMemberForm.$invalid"><i class="icon-plus"></i></a>
</form>
JS
$scope.createMember = function(member) {
var membersService = new Members(member);
membersService.$create(function(member) {
$scope.members.push(member);
$scope.addMemberForm.reset(); //TypeError: Object #<FormController> has no method 'reset'
});
};
Is there another way to reset form elements?
Figured it out thanks to #tschiela's comment. I had to do this:
$scope.createMember = function(member) {
var membersService = new Members(member);
membersService.$create(function(member) {
$scope.members.push(member);
$scope.member = '';
});
};
Just Take default value of the form .
HTML form
<form novalidate id="paperForm" class="form-horizontal" name="formPaper">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">
Name
</label>
<div class="col-sm-8">
<input type="text" id="name" placeholder="Please Enter Name" class="form-control" ng-model="paper.name" ng-name="name" required>
</div>
<label class="col-sm-3 control-label" for="name">
Department
</label>
<div class="col-sm-8">
<input type="text" id="department" placeholder="Please Enter Department" class="form-control" ng-model="paper.department" ng-name="department" required>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="reset(paper)">Reset</button>
</form>
set reset code inside controller
var deafualtForm = {
name : '',
department : ''
}
$scope.reset= function(paper) {
$scope.paper = angular.copy(deafualtForm);
}