I'm new to angular.js and i have been having trouble getting form input value.
So i have looked for an answer all over including stackoverflow i could not find any answer.
I want to get the input values using the controller but on each attempt i try i get in the console that its undefined on just using either an object or just text
here is the javascript code:
$scope.url = '';
$scope.user = {
password : '',
repassword : ''
};
$scope.registerUser = function()
{
$log.info($scope.email);
$log.info($scope.user);
}
here is the html code:
<table class="table-responsive">
<tbody>
<form class="form-inline" action="" method="post">
<div class="form-group">
<tr>
<td><label for="email">E-mail</label></td>
<td>
<div class="input-group">
<input type="email" class="form-control" name="email" ng-model="email">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
</div>
</td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" class="form-control" name="password" ng-value="user.password"><td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="Repassword">Reenter Password:</label></td>
<td><input type="password" class="form-control" name="Repassword" ng-value="user.repassword"></td>
</tr>
</div>
<tr><td><input class="btn btn-default" type="button" value="Register" ng-click="registerUser()"></td></tr>
</form>
</tbody>
</table>
You're using ng-value instead of ng-model:
<input type="password" ng-model="user.password">
<input type="password" ng-model="user.repassword">
You might also want to pass in user to your ng-click for convenience and less typing in the function:
ng-click="registerUser(user)"
$scope.registerUser = function(user) {
console.log(user);
}
Related
I spent hours looking for, but I couldn't find a solution. I'v to automatize a human job with JS, and I ran some tests in aleatory sites and it works. But in a specific site, i'm having the following problem on the login page:
OBS: I'm doing this in browser console, for tests.
var username = window.document.getElementById("username")
undefined
var password = window.document.getElementById("password")
undefined
var signin = window.document.querySelector(".splButton-primary.btn")
undefined
username.value = "usuariovalue"
"usuariovalue"
password.value = "passwordvalue"
"password value"
signin.click()
but, i'm receiving this msg:>common.js:27 POST https://siteexemple/en-US/account/login 401 (Unauthorized). If I fill the username and password manually in site and after, click on the button using the JS, it works.
I can't see the difference.
Follow the block of code of the site:
<form method="post" class="loginForm" action="/en-US/account/login">
<div style="display: none" data-cid="view200" class="account-login-firsttime" data-view="views/account/login/FirstTime" data-render-time="0">
<h2>First time signing in?</h2>
<p>If you've forgotten your username or password, please contact your Splunk administrator.</p>
<table>
<tbody><tr>
<td>username</td>
<td>admin</td>
</tr>
<tr>
<td>password</td>
<td>changeme</td>
</tr>
</tbody>
</table>
</div>
<fieldset>
<div class="control account-login-textcontrol control-default" data-cid="view197" data-view="views/account/login/TextControl" data-name="username" data-render-time="0">
<span class="uneditable-input " data-role="uneditable-input" style="display:none"></span>
<input type="text" name="username" class=" " value="" autocomplete="off" id="username" placeholder="Username"> </div>
<div class="control account-login-textcontrol control-default" data-cid="view199" data-view="views/account/login/TextControl" data-name="password" data-render-time="0">
<span class="uneditable-input " data-role="uneditable-input" style="display:none"></span>
<input type="password" name="password" class=" " value="" autocomplete="off" id="password" placeholder="Password"> </div><input class="splButton-primary btn" type="submit" value="Sign in">
<input type="hidden" name="cval" value="1900007162">
<input type="hidden" name="return_to" value="/en-US/">
</fieldset>
</form>
Can you, help me? I'm starting with JS.
I am trying to add for this example a simple javascript function to prompt a alert on document load of my form in Magento 2.
i've addded a custom form on my custom payment option.
I have tried adding the code inline of the html form
define
([
'Magento_Checkout/js/view/payment/default',
'jquery',
'jquery/ui',
],
function (Component,$) {
'use strict';
$(document).on("click","#SendOTP", function() {
alert("Test!");
});
return Component.extend({
defaults: {
template: 'Emipro_Custompayment/payment/custompayment'
},
});
});
Please enter your ID Number and click send OTP to continue the process, This helps us confirm your identity
and secure your transaction.
<table>
<tr nowrap>
<td nowrap>
<label >ID Number : <span class="required"></span></label>
</td>
<td>
<input id="idNumber" name="idNumber" type="text" class="form-control" AutoPostBack="True">
</td>
<td>
<button id="SendOTP" type="button" class="btn btn-secondary" data-bind="click : postAction()">Send OTP</button>
<input type="hidden" id="otpSent" value=""/>
<input type="text" style="display:none" id="GUID" name="GUID" />
<input type="text" style="display:none" id="pinSuccess" name="pinSuccess" />
<input type="text" style="display:none" id="username" name="username" value="565" />
<input type="text" style="display:none" id="password" name="password" value="demo" />
<input type="text" style="display:none" id="orderTotal" name="orderTotal" value="50000"/>
</td>
<tr>
<td>
<label id="pinverifylabel">OTP : <span class="required"></span></label>
</td>
<td>
<input id="OTP" type="text" class="form-control" autocomplete="off" >
</td>
<td>
<button id="pinverifybtn" type="button" class="btn btn-secondary">Verify OTP</button>
</td>
<label id="otpResult" style="display:none"></label>
<label id="balance" style="display:none"></label>
<label id="labelBalance" style="display:none"></label>
</tr>
</table>
define(
[
'Magento_Checkout/js/view/payment/default',
'jquery',
'jquery/ui',
],
function (Component,$) {
'use strict';
return Component.extend({
defaults: {
template: 'Emipro_Custompayment/payment/custompayment'
},
initialize: function () {
self = this;
this._super();
},
getMailingAddress: function () {
return checkoutConfig.payment.custompayment.password;
},
click: function($){//java code here}
I am trying to do use the angular push function but it is not working.
i am storing form values into local storage every time it will be replacing the old object with new object...
I want to add strings (or objects) into an array.
Below is my HTML code:
<form name="myForm" novalidate>
<p> Username:<br>
<input type="text" name="user" ng-model="user.user" required>
<span ng-show="myForm.user.$pristine"/>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="user.email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p> PhoneNum:<br>
<input type="number" name="PhoneNum" ng-model="user.PhoneNum" required>
<span ng-show="myForm.PhoneNum.$pristine"></span>
</p>
<p>Address:<br>
<input type="text" name="address" ng-model="user.address" required>
<span ng-show="myForm.address.$pristine"></span>
</p>
<p>Password:<br>
<input type="Password" name="pass" ng-model="user.pass" required>
<span ng-show="myForm.pass.$pristine" />
</p>
<p>
<input type="submit" ng-click="addItem(user)" ng-disabled="myForm.$invalid">
</p>
</form>
<pre>user = {{user | json}}</pre>
<table>
{{userdata}}
<tr>
<td>user</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Password</td>
</tr>
<tr ng-repeat="x in userArray">
<td>{{x.user}}</td>
<td>{{x.email}}</td>
<td>{{x.PhoneNum}}</td>
<td>{{x.address}}</td>
<td>{{x.pass}}</td>
</tr>
</table>
Below is my js code:
var app = angular.module("myApp", ['ngRoute','ngStorage']);
app.controller("userCtrl",['$scope','$localStorage','$log',function($scope,$localStorage,$log){
$scope.userArray=[];
$scope.userdata=$localStorage.data;
$scope.addItem=function(user){
//var current=$localStorage.data;
//$scope.userArray=userArray.concat(user);
$log.log($scope.userArray);
$scope.userArray.push(user);
$localStorage.data=$scope.userArray;
$scope.userdata=$localStorage.data;
}
}]);
The data will stored local storage
But everytime I click the button it overwrites the data in my localstorage.
Does anybody know how to do this?
You have to clear user object first after push in userArray as
$scope. user = {};
Here is the link Jsfiddle demo
$scope.addItem = function(user) {
$scope.userArray.push(user);
$scope.user = {};
$localStorage.data = $scope.userArray;
$scope.userdata = $localStorage.data;
}
I want to refresh a html table using AngularJs.
Infact this is my code homepage code
<body ng-app="myApp">
<div class="generic-container" ng-controller="UserController as ctrl">
<div id="createUserContent.jsp" ng-include="createUserContent"></div>
<div id="editUserContent.jsp" ng-include="editUserContent"></div>
<div id="deleteUserContent.jsp" ng-include="deleteUserContent"></div>
<table>
<tr>
<td><button type="button" class="btn btn-primary"
ng-click="ctrl.openCreateUser()">Create</button></td>
</tr>
</table>
<table class="table table-hover">
<thead>
<tr>
<th>ID.</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in ctrl.users">
<td><span ng-bind="u.ssoId"></span></td>
<td><span ng-bind="u.firstName"></span></td>
<td><span ng-bind="u.lastName"></span></td>
<td><span ng-bind="u.email"></span></td>
<td>
<button type="button" ng-click="ctrl.openEditUser(u)"
class="btn btn-success custom-width">Edit</button>
<button type="button" ng-click="ctrl.openDeleteUser(u)"
class="btn btn-danger custom-width">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Now i have the createUserContent which is
<form role="form" ng-controller="UserController as ctrl" >
<div class="form-group">
<label for="FirstName">FirstName</label> <input type="FirstName"
ng-model="ctrl.user.firstName" class="form-control"
id="FirstName" placeholder="Enter FirstName" /> <label
for="lastName">lastName</label> <input type="lastName"
class="form-control" id="lastName"
ng-model="ctrl.user.lastName" placeholder="Enter lastName" />
<label for="email">Email address</label> <input type="email"
ng-model="ctrl.user.email" class="form-control" id="email"
placeholder="Enter email" />
</div>
<div class="form-group">
<label for="homeAddressLocation">Home Address</label> <input class="form-control"
ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation"
placeholder="homeAddressLocation" />
</div>
<div class="form-group">
<label for="SSOId">SSOId</label> <input class="form-control"
ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId" />
</div>
<button type="submit" class="btn btn-default"
ng-click="ctrl.saveUser(ctrl.user)">Save</button>
<button type="submit" class="btn btn-default">Cancel</button>
</form>
Now when i finish saving the user i want my table to automatically refresh but i don't know how to do it.
I tried $apply but in vain This is my angular js code:
App.controller('UserController', function($scope, UserService, $window,$log,$uibModalStack, $rootScope,
$uibModal) {
var self = this;
self.user = {
id : null,
username : '',
address : '',
email : ''
};
self.users = [];
self.fetchAllUsers = function() {
UserService.fetchAllUsers().then(function(d) {
self.users = d;
if(!$scope.$$phase) {
$scope.$apply();
}
}, function(errResponse) {
window.alert(errResponse);
console.error('Error while fetching Currencies');
});
};
self.saveUser = function(user) {
UserService.createUser(user);
$log.log("saving user");
$uibModalStack.dismissAll();
$rootScope.$on('saveUserWithSuccess', function (event, data) {
self.fetchAllUsers();
if(!$scope.$$phase) {
$scope.$apply();
}
You don't need to do $scope.$apply, you're doing it right already :) Just make sure your UserService returns the actuall array with users, and not an object containing data.users[].
Does your UserService.createUser() return a promise? In that case, I would do UserService.createUser().then(function(){ self.fetchAllUsers(); \); instead of using $rootScope.$on('saveUserWithSuccess'.
Also, you shouldn't inject $rootScope in a controller. Only use $scope.$on in a controller, and $rootScope.$broadcast in a service.
I have a problem with my ng-repeat. I am working in a project and I'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array.
In the table below, it was supposed to show the array. But it isn't showing.
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject"> Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject"> Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
</div>
<div class="form-group">
<label for="inputScoreSubject"> Grade </label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
</form>
</div>
<br><br><br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings"> {{head}}</th>
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</table>
</div>
angular.module('myProjectApp')
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function(){
$scope.grades.push($scope.grade);
console.log($scope.grades);
}
});
Because you close off your tr element so your td elements are not considered in the same scope as your ng-repeat and do not get printed correctly. Not to mention it is also not valid html.
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
should be
<tr ng-repeat="gr in grades track by $index" >
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</tr>
Patrick beat me to it!
angular.module('myProjectApp', [])
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function() {
$scope.grades.push($scope.grade);
console.log(JSON.stringify($scope.grades));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myProjectApp" ng-controller="MainCtrl">
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject">Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject">Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
</div>
<div class="form-group">
<label for="inputScoreSubject">Grade</label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
</form>
</div>
<br>
<br>
<br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings">{{head}}</th>
<tr ng-repeat="gr in grades">
<td>{{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td>{{gr.score}}</td>
</tr>
</table>
</div>
</body>