i am trying to set up a simple authentification.it worked in ionic 1.X but it didn't work in a webapp using angularJs.it's the same code.somehow it didn't work.tried adding "" but it didn't work
here's my code
$scope.emailPassLogin = function () {
firebase.auth().signInWithEmailAndPassword($scope.email, $scope.pwd)
.then(function (response) {
console.log(response);
}).catch(function (error) {
// Handle Errors here.
$scope.error = error;
$scope.message = error.message;
});
};
the ng-model is present in the view
<form class="form-signin" role="form">
<input type="text" ng-Model="email" class="form-control" placeholder="Adresse Email" required="" autofocus="">
<input type="password" ng-Model="pwd" class="form-control" placeholder="mot de passe" required="">
<button ng-click="emailPassLogin()" type="submit">Se Connecter</button>
</form>
you see it's pretty straight-forward.Yet somehow the function works in Ionic but not in webapp angularjs
thank you for the help
ng-Model should be ng-model. It is case sensitive. Your 2 html input tags then become:
<input type="text" ng-model="email" class="form-control" placeholder="Adresse Email" required="" autofocus="">
<input type="password" ng-model="pwd" class="form-control" placeholder="mot de passe" required="">
<button ng-click="login()"
I don't see a login function in the controller.My angularjs is a little rusty but I think you need to have that named function in the controller you are using for your component.
i made it work.here's what i did
$scope.user1=[];
$scope.login=function(){
firebase.auth().signInWithEmailAndPassword($scope.user1.email,$scope.user1.pwd)
.then(function(firebaseUser){
console.log("Signeds: "+firebaseUser.uid);
window.localStorage.setItem("email",firebaseUser.email);
}).catch(function(error){
console.error("Authenticationed: "+error);
});
}
<form class="form-signin" role="form">
<input type="text" ng-model="user.email" placeholder="Adresse Email" required="">
<input type="password" ng-model="user.pwd" placeholder="mot de passe" required="">
<button ng-click="login()" type="submit">Se Connecter</button>
</form>
added the user in ng-model and in js file
Related
I am trying to create an update form in Angular. I have tried many things but then again im not very familiar with Angular to begin with. This seems pretty straight forward though, I am getting the data using the ngOnInit() method (which is returning the correct data). The user data is displayed in the input fields but then the error comes up.
This is the error that I get in the console:
UpdateComponent.html:6 ERROR TypeError: Cannot read property 'firstName' of undefined
at Object.eval [as updateDirectives] (UpdateComponent.html:6)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
at checkAndUpdateView (core.js:11307)
at callViewAction (core.js:11548)
at execComponentViewsAction (core.js:11490)
at checkAndUpdateView (core.js:11313)
at callViewAction (core.js:11548)
at execEmbeddedViewsAction (core.js:11511)
at checkAndUpdateView (core.js:11308)
at callViewAction (core.js:11548)
My update.component.html file:
<div>
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" [(ngModel)]="user.firstName" name="firstName" class="form-control" id="firstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" [(ngModel)]="user.lastName" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" [(ngModel)]="user.age" name="age" class="form-control" id="age" placeholder="Age" min="0" max="200">
</div>
<div class="form-group">
<label for="favoriteFood">What is your Favorite Food?</label>
<input type="text" [(ngModel)]="user.favoriteFood" name="favoriteFood" class="form-control" id="favoriteFood" placeholder="Favorite Food">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" [(ngModel)]="user.username" name="username" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" [(ngModel)]="user.email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><div>
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" [(ngModel)]="user.firstName" name="firstName" class="form-control" id="firstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" [(ngModel)]="user.lastName" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" [(ngModel)]="user.age" name="age" class="form-control" id="age" placeholder="Age" min="0" max="200">
</div>
<div class="form-group">
<label for="favoriteFood">What is your Favorite Food?</label>
<input type="text" [(ngModel)]="user.favoriteFood" name="favoriteFood" class="form-control" id="favoriteFood" placeholder="Favorite Food">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" [(ngModel)]="user.username" name="username" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" [(ngModel)]="user.email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
My update.component.ts file:
import { Component, OnInit } from '#angular/core';
import { AuthService } from '../../services/auth.service';
import { ValidateService } from '../../services/validate.service';
import { Router } from "#angular/router";
import { FlashMessagesService } from 'angular2-flash-messages';
#Component({
selector: 'app-update',
templateUrl: './update.component.html',
styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
user: Object;
constructor(
private authService: AuthService,
private validateService: ValidateService,
private router: Router,
private _flashMessagesService: FlashMessagesService
) { }
ngOnInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
});
}
onUpdateSubmit(user) {
console.log("Component", user)
// Required Fields
if(!this.validateService.validateSignup(user)) {
this._flashMessagesService.show("Please fill in all fields", {cssClass: "alert-danger", timeout: 3000});
return false;
}
// Validate Email
if(!this.validateService.validateEmail(user.email)) {
this._flashMessagesService.show("Please use valid email", {cssClass: "alert-danger", timeout: 3000});
return false;
}
// Update user
this.authService.updateUser(user).subscribe(data => {
if(data.success) {
this._flashMessagesService.show("Update Success!", {cssClass: "alert-success", timeout: 3000});
this.router.navigate(["/profile"]);
} else {
this._flashMessagesService.show("Something went wrong", {cssClass: "alert-danger", timeout: 3000});
this.router.navigate(["/update"]);
}
});
}
}
This is because there is no firstName returned in user data. Maybe it is undefined. To avoid the issue.
You'd better: 1. Check the user data in ngOnInit() if it is returned. 2. Initial user data. e,g: user = { firstName: '' }; 3. Check whether there is a delay when get user data from service
You are having a two way binding in your form , then why you need to pass the user on form submit. Try using as below
<form (ngSubmit)="onUpdateSubmit()" novalidate>
.
.
.
and use
onUpdateSubmit() {
console.log("Component", this.user);
.
.
.
}
Your error message is clear. Your user is populated by api call on ngOnInit which however, may return a response after the html is loaded. While loading, your DOM expect user to the available but its undefined in your case. There are few ways you can fix this. First , folloow the usual standard, define your user like below in your constructor.
constructor(
private authService: AuthService,
private validateService: ValidateService,
private router: Router,
private _flashMessagesService: FlashMessagesService
) {
this.user = <Object>{};
}
Now your user is not undefined and even though user.name might be , it will be briefly and error will not be thrown. Second option is, update your update.component.html, load your DOM only when user is available or not undefined. To do this, add *ngIf in your first div
<div *ngIf="user">
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
........
.........
</form
</div>
Form the above, your form will not be loaded when user is undefined hence the need for user.name is avoided .
This is because there is no firstName defined in user data. This is because at the time of your page loads, your user object is not initialised. If there is no object assigned to this.user in ngOnInit it will return an exception.
You can fix this in two ways.
One method is to initialize the this.user object at the beginning. It will return a blank form if there is no object is assigned to the user object in ngOnInit but it won't return an exception. You can do it by simply initializing the user object when defining the object or in the constructor.
when defining the object
user={}
or in constructor
this.user={}
Second method is, in case you want to display the form only if there are data you can use the *ngIf to display the form only when the there are data in the user object.
<div *ngIf="user">
<h2 class="page-header">Edit your Profile</h2>
<form (ngSubmit)="onUpdateSubmit(user)" novalidate>
........
.........
</form
</div>
I'm submitting a simple form by using jquery post method but when I call the post method I'm getting this wierd error message
VM1233 jquery.min.js:2 Uncaught TypeError: (h.dataType || "*").toLowerCase is not a function
at Function.ajax (VM1233 jquery.min.js:2)
at Function.w.(:8000/Marketing/anonymous function) [as post] (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:78094)
at submitLeadDetails (VM1235 main.js:10)
at HTMLFormElement.onsubmit (index.html?name=haskdaskd&Contact=harish+kumar&phone=9030590437&date=12%2F04%2F2018&Time=09%3A00:33)
this is the code that I have written :
var submitLeadDetails = function(){
console.log('Post function executed');
var LeadDetailsObject = {};
LeadDetailsObject.schoolName = document.getElementById('name').value;
LeadDetailsObject.contactPerson = document.getElementById('contact').value;
LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
LeadDetailsObject.date = document.getElementById('date').value;
LeadDetailsObject.time = document.getElementById('time').value;
console.log(LeadDetailsObject);
$.post('http://localhost:8000/webapi/leads', LeadDetailsObject, function(data){
console.log('Success');
console.log(data);
$('#leadDetailsForm')[0].reset();
}, function(error){
console.log('Error');
console.log(error);
})
}
<form id="leadDetailsForm" onsubmit="submitLeadDetails()">
<div class="form-group">
<label for="name">School Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter School Name" name="name" required>
</div>
<div class="form-group">
<label for="contact">Contact Person:</label>
<input type="text" class="form-control" id="contact" placeholder="Enter Contact Person Name" name="Contact" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" class="form-control" id="phone" placeholder="Enter Contact Person's Phone Number" name="phone" required>
</div>
<!--<div class="form-group">-->
<!--<label for="address">Address:</label>-->
<!--<textarea class="form-control" rows="5" placeholder="Enter School Address" id="address" required></textarea>-->
<!--</div>-->
<div class="form-group col-sm-6" style="padding-left: 0;">
<label for="date">Date:</label>
<input type="text" class="form-control" id="date" placeholder="Enter Date" name="date" required>
</div>
<div class="form-group col-sm-6">
<label for="time">Time:</label>
<input type="text" class="form-control" id="time" placeholder="Enter Time" name="Time" required>
</div>
<button type="submit" class="btn btn-lg pull-right" style="margin-top: 3%; background-color: #2a2c30; color:#fff;" >
Submit
</button>
</form>
The error says you are passing the wrong argument to the .post() method. The fourth argument should be dataTypeand not a callback.
See the docs: https://api.jquery.com/jquery.post/
In your case you could make use of .done() and .fail() to handle the status of the request:
var submitLeadDetails = function(){
console.log('Post function executed');
var LeadDetailsObject = {};
LeadDetailsObject.schoolName = document.getElementById('name').value;
LeadDetailsObject.contactPerson = document.getElementById('contact').value;
LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
LeadDetailsObject.date = document.getElementById('date').value;
LeadDetailsObject.time = document.getElementById('time').value;
console.log(LeadDetailsObject);
$.post('http://localhost:8000/webapi/leads', JSON.stringify(LeadDetailsObject))
.done(function(data){
console.log('Success');
console.log(data);
$('#leadDetailsForm')[0].reset();
})
.fail(function(xhr, status, error) {
console.log('Error');
console.log(error);
});
}
jQuery tries to lowercase the values probably because of some checks. But when it tries to lowercase a number, it crashes. You have type="number" in your inputs. Probably that causes the error
I am trying to combine input text with HTTP get. I tried some methods it works but it' doesn't what I want. I have some URL like this http://localhost/web.php?tN=false&f5=kaka
in f5 get some data from input in HTML. This my HTML
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-user"></i> Username</span>
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-click="submitFunction()" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-lock"></i> Password</span>
<input id="inputPassword" class="form-control" placeholder=" Password" name="password" type="password" ng-model="loginData.password" required>
</label>
</div>
and this my controller
$scope.submitFunction = function() {
kaka.falselogin($scope.loginData.username).success(function(data) {
console.log(data);
});
};
My problem is that I must click after input in form username to get data. It's complicated if I must get data after input in form username
anyone has an idea ? Please help me to solve my problem. Thanks
You can just use the ng-change directive.
It'll run the provided function whenever the input`s value changed.
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-change="submitFunction()" required>
Considering you issue HTTP requests on each change, you'd basically flood the server.
To solve that issue you can debounce the model so that it takes x ms until the new value will be applied.
ng-model-options='{ debounce: 1000 }'
In combination it would look like this:
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-model-options='{ debounce: 1000 }' ng-change="submitFunction()" required>
There you go :)
I was trying to print form values on submit to console.log to test. But getting a undefined message. Can't figure out where I am going wrong exactly. I have gone through various answers on StackOverflow but still no luck. Here is the code -
HTML
<form class="form-inline">
<label class="required">* required </label>
<div class="form-group">
<input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
</div>
<div class="form-group">
<input type="email" class="form-control inputArea" id="email" placeholder="Email *">
</div>
<div class="form-group">
<input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
JavaScript
<script>
var formInput = document.querySelectorAll('#fullname, #email, #phn');
document.querySelector('form.form-inline').addEventListener('submit', function (e) {
e.preventDefault();
console.log(formInput.value);
});
</script>
You are getting undefined because forminput is not a single object it has multiple objects which doesn't have property value.
You can get value by index like below
console.log(formInput[0].value);
You are querying the form before the values are inputted. The first line of your script should be inside the event listener:
<script>
document.querySelector('form.form-inline').addEventListener('submit', function (e) {
e.preventDefault();
var formInput = document.querySelectorAll('#fullname, #email, #phn');
console.log(formInput.value);
});
</script>
The values are being query-ed on page-load. You need to wait until the user submits before you check the values.
You can try this. Hope it helps!
function myFunction(){
var a = document.getElementById("fullname").value;
var b = document.getElementById("email").value;
var c = document.getElementById("phn").value;
console.log(a);
console.log(b);
console.log(c);
return false;
}
<form class="form-inline" onsubmit = " return myFunction()">
<label class="required">* required </label>
<div class="form-group">
<input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
</div>
<div class="form-group">
<input type="email" class="form-control inputArea" id="email" placeholder="Email *">
</div>
<div class="form-group">
<input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
I am trying to save user details like first name, last name and etc.along with user's profile image via Ajax calls. But I am getting error like "Uncaught TypeError: Illegal invocation" in console.So I searched over the network, and they said to add .value and the error is resolved. But now the form details are not submitted. Can any one help me to resolve this problem . Thanks in advance.
HTML Form :
<form id="userRegisterform" name="userRegisterform" method="post">
<fieldset class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name" required="true">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter Last Name" required="true">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">UserName</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="name1" placeholder="Enter UserName" required="true">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" name="email1" placeholder="Enter email" required="true">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password1" placeholder="Password" required="true">
</fieldset>
<div class = "form-group">
<label><?php __('Select Files:', 'cvf-upload'); ?></label>
<input type="file" name="file[0]" id="file" class="profileImage" required ="true" accept="image/*" >
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" id="userRegister"/>
</form>
jQuery Ajax Code:
<script>
$(document).ready(function () {
$("#userRegisterform").validate({
rules: {
name1: {
required: true
},
email1: "required",
password1 : "required"
},
messages: {
name1: {
required: "Please provide your user name"
},
email1: "Please provide your email",
password1 : "Please enter password"
},
submitHandler: function (form) {
var ajaxData = new FormData();
$.each($(':input', form), function (i, fileds) { // appending all the form data
ajaxData.append($(fileds).attr('name'), $(fileds).val());
});
ajaxData.append('action', 'athleteRegister');
$.each($("input[type=file]"), function (i, obj) { // appending all the file uploads data
$.each(obj.files, function (j, file) {
ajaxData.append('file[' + i + ']', file);
})
});
console.log(ajaxData);
var url = "http://localhost/wordpress/wp-admin/admin-ajax.php";
var data = {
formData1:ajaxData.value,
action:'userRegistersave'
};
processData:false,
$.post(url,data,function(response){
alert(response);
});
}
});
});
</script>
My functions.php
function userRegistersave() {
if (isset($_REQUEST)) {
print_r($_REQUEST);exit();
}
wp_die();
}