I am trying to pass data from html input to a vanilla JS class constructor.
this is what I have tried.
class Users {
constructor(email,password) {
this.email = email;
this.password = password;
}
login(){
// url for endpoint
let url = "http://127.0.0.1:5000/api/v2/users/login"
alert(this.password)
// get login data from ui
let data = {
email : this.email,
password : this.password
};
}
let email = document.getElementById('email').value,
let password = document.getElementById('password').value
const user = new Users(email,password)
document.getElementById('login').addEventListener('submit', user.login())
It seems no data is passed to the email and password variables.
I have also tried to do this but the object is not called
class Users {
constructor(email,password) {
this.email = email;
this.password = password;
}
login(){
// user the data here
}
function load(event){
let email = document.getElementById('email').value,
let password = document.getElementById('password').value
const user = new Users(email,password)
user.login()
}
document.getElementById('login').addEventListener('submit', load)
Someone help me on how to work on this.
I have tried my best to refactor your code. Depending on what you want to do with the data, thats up to you. But in the below code, you can get the email and password in the login function
class Users {
constructor() {
}
login(){
let email = document.getElementById('email').value,
password = document.getElementById('password').value
alert(email, password)
}
}
const user = new Users();
const login = user.login
<input type="text" id="email" />
<input type="text" id="password" />
<button id="login" onclick="login()">submit</button>
Related
I'm making a dynamic website that need to show the user's name in the heading. The heading should say 'Hello, ', when the user enters their name into the text box and presses the button. And the name has to stay on the page even if I refresh the page.
What will be the javascript functions and html codes to implement this?
However, to implement this, the site need to read the query string when the page is loaded, not when the button is pressed. How can I write functions for the onload event for this?
I've tried this, but this doesn't work.
function setUserName() {
var userName = document.getElementById("userName").value;
localStorage.setItem("userName", userName);
}
function getUserName() {
var userName = localStorage.getItem("userName");
return userName;
}
function displayUserName() {
var userName = getUserName();
if (userName) {
document.write("Hello, " + userName);
} else {
document.write("Hello, world!");
}
}
<input type="text" id="userName">
<button onclick="setUserName()">Set Name</button>
<body onload="displayUserName()"></body>
Try this code, It might helpfull to you
function setUserName() {
var userName = document.getElementById("userName").value;
localStorage.setItem("userName", userName);
location.reload();
}
function getUserName() {
var userName = localStorage.getItem("userName");
return userName;
}
function displayUserName() {
var userName = getUserName();
if (userName) {
document.getElementById("helloText").textContent = "Hello, " + userName;
} else {
document.getElementById("helloText").textContent = "Hello, world";
}
}
<span id="helloText"></span>
<input type="text" id="userName" name="userName">
<button onclick="setUserName()">Set Name</button>
<body onload="displayUserName()">
</body>
Local storage wont work with the snippet by the way
I have .js file where I loop through Firebase real time database to find email and password of registered users which is stored under /users tree in database where each child is randomly generated unique id which has user information. I am getting email and password information from form element. Problem is the alert messages in checkMessage are not executed when email and password do not equal same. Alert message should be displayed but only page refreshes.
Database:
----/Users
--------/XJIGFDMDKGD
-------------email: "a#b.com"
-------------password: "12345"
--------/XJFGNRIENGJ
-------------email: "c#d.com"
-------------password: "67890"
My code:
document
.getElementById('loginForm')
.addEventListener('submit', formSubmit);
function formSubmit(e) {
e.preventDefault();
document.querySelector('.alert').style.display = 'block';
// Get Values from the DOM
let email = document.querySelector('#email').value;
let password = document.querySelector('#password').value;
//check message values
checkMessage(email, password);
//Form Reset After Submission
//document.getElementById('loginForm').reset();
}
checkMessage function:
function checkMessage(email, password) {
var usrs = firebase.database().ref('users');
usrs.on("child_added", function(snapshot) {
var user = snapshot.val();
if (user.email == email) {
if (user.password == password) {
} else {
}
} else {
document.querySelector('.alert2').style.display = 'block';
setTimeout(function() {
document.querySelector('.alert2').style.display = 'none';
}, 7000);
document.getElementById('loginForm').reset();
}
);
}
The error was caused by syntax problem, an extra brace at the end of the following section of code, as well as a misplaced parentheses. Fixed solution:
var users = firebase.database().ref('users');
users.on("child_added", function(snapshot) {
var user = snapshot.val();
if (email == user.email) {
if (password == user.password) {
}
} else {
};
});
I'm making a login page where if the email address already exists i want to stay on the same page and prompt the user that the email address already exists.
Here is the function which is the onClick function that will be called when the button is clicked
function login() {
var username = document.getElementById("username").value;
var pword = document.getElementById("pword").value;
var confpwd = document.getElementById("confpwd").value;
var email = document.getElementById("email").value;
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var gender = document.getElementById("gender").value;
var t = 1;
if (t.toString() !== '0') {
var er = "Email-id already exists";
event.preventDefault();
document.getElementById("nemail").value = er;
document.getElementById("username").value = username;
document.getElementById("pword").value = "";
document.getElementById("confpwd").value = "";
document.getElementById("fname").value = fname;
document.getElementById("lname").value = lname;
document.getElementById("gender").value = gender;
}
}
You must pass a function to the <form onsubmit="return login()">. The login function must return true if you want to submit and false otherwise. See this answer for more details: JavaScript code to stop form submission
Working codepen to illustrate: http://codepen.io/DeividasK/pen/YZqwLO
Depending on how your code is setup to submit. You may just need to insert a return when the code realizes the email address is a duplicate. Something along this path might help prevent the page from moving forward.
if (ListOfExistingEmails.indexof(email) > 0 ) return false;
I am trying to use local storage to make a basic registration and login screen.
I have managed to get all the basics running but I can't get the fields to save to the local storage to them pull for the login process. I do not believe the HTML is wrong but the Javascript.
Here is the JS:
function save() {
var inputUserName = document.getElementById('regusername');
var inputPassWord = document.getElementById('regpassword');
var inputEmail = document.getElementById('regemail');
localStorage.setItem('username', inputUserName.value);
localStorage.setItem('email', inputEmail.value);
localStorage.setItem('password', inputPassWord.value);
}
function check() {
// Getting data from the register-form
var inputUserName = localStorage.getItem('username');
var inputPassWord = localStorage.getItem('password');
var username = document.getElementById('username');
var password = document.getElementById('password');
if (username.value == inputUserName && password.value == inputPassWord) {
alert('You have successfully logged in' + inputUserName);
} else {
alert('ERROR')
for(var i = 0; i < localStorage.length; i++){
alert(localStorage.key(i));
}
}
}
I figured it out, it was my HTML I had a name="Name" and it seemed to collide with the input that the user had changing to whatever was in the name="" in this case being Name, Email and Password.
If you want to get the input of the user in a specific field, you need to use something like:
document.getElementById('username').value;
You forgot to add the .value at the end.
i have written a javascript function thats posts a form and redirect to home page . Im using window.location.replace to get to home page. but instead of replacing the url the function is appending the url in front of current url. Whats the problem?
$('#submit_fourth').click(function () {
// send data to server to save in table dbo.aspnet_Users =================================================
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var username = $("#username").val();
var password = $("#password").val();
var email = $("#email").val();
$.post("/Account/Register", { FirstName: firstname, LastName: lastname, UserName: username, Password: password, ConfirmPassword: password, Email: email });
//send information to server
alert('Congratulations! Your account has been sucessfully created.');
//get back to the login screen
window.location.replace("dgsmart/Central/Login");
current url is 184.180.25.240/dgsmart/account/register after register button click it becomes 184.180.25.240/dgsmart/account/central/login
i want url lyk this 184.180.25.240/dgsmart/central/login
I assume you are using a form onsubmit event to call some function, if so you have to prevent the default behavior by return false; (for example)
window.location.replace("absolute-address"); /*window.location.replace('http://example.com/#' + initialPage); */
return false; //prevent the default behavior of the submit event
You can also using this code to set your ideal url...
<script>
location.href='RegisterNew.php';
</script>