After some hours of research I still haven't found out how I should store new users in localStorage.
I have 2 pages: 1 for login and 1 for register as it follows:
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email id"/>
<button>Create</button>
<p class="message">Already Registered? Login</p>
</form>
<form class="login-form">
<input type="text" placeholder="user name"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Register </p>
</div>
</div>
Now I am trying to store the new registered users (in order to use them for login) into localStorage like this:
userData = {
firstName: 'John',
lastName: 'Smith',
email: 'admin#gmail.com',
password: '123456789'
},
adminData;
localStorage.setItem('userData', JSON.stringify(userData));
adminData = JSON.parse(localStorage.getItem('userData'));
But unfortunately, I can't find any ideas around it. I know it's not such a good idea to store sensitive data on client side, but it's only for learning purpose.
Thanks
What you have done is correct but for checking the variable value try alert instead of console, because I think you are not properly able to see the data or even you go to Developer Tools, Application Tab.
And If you can share your full code, maybe I can help you with it.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input id="username" type="text" placeholder="name"/>
<input id="passcode" type="password" placeholder="password"/>
<input id="email" type="text" placeholder="email id"/>
<button onclick="addToLocal()">Create</button>
<p class="message">Already Registered? Login</p>
</form>
<form class="login-form">
<input type="text" placeholder="user name"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Register </p>
</form>
</div>
</div>
<script>
function addToLocal() {
var username = document.getElementById('username').value;
var passcode = document.getElementById('passcode').value;
var emailAddress = document.getElementById('email').value;
var userDetails = {
"username": username,
"passcode": passcode,
"emailAddress": emailAddress,
}
localStorage.setItem("userDetails", JSON.stringify(userDetails));
}
</script>
</body>
</html>
Related
I want to use user input to decide whether or not the user is redirected to another page. In this case, the user inputs a username and password. If the username and password is correct, then the user is redirected. For this, I use simple javascript and html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Login</title>
<!-- the form awesome library is used to add icons to our form -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"> -->
<!-- include the stylesheet file -->
<link href="login.css" rel="stylesheet" type="text/css">
<script>
function testResults (form) {
var given_username = form.username.value;
var given_password = form.password.value;
var correct_username = "123";
var correct_password = "123";
if (given_username == correct_username && given_password == correct_password) {
window.location.assign("redirected.html");
}
else {
alert("Wrong username and/or password.")
}
}
</script>
</head>
<body>
<div class="login">
<h1>Login</h1>
<form action="" method="get">
<label for="username">
<!-- font awesome icon -->
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="submit" value="Login" onclick="testResults(this.form)" />
</form>
</div>
</body>
</html>
However, when I fill in the correct username and password, in this case '123', I don't get redirected at all. Nothing happens.
But, when I don't use an if statement at all:
<script>
function testResults (form) {
window.location.assign("redirected.html");
}
</script>
it works correctly. That is, whenever you press the submit button, you get redirected. However, in this case the user does not have to fill in credentials at all, so in my case this is not of much use.
I have tried window.location, location.assign, location.href, location.replace and variants, but all yield the same result.
How can I solve or work around this?
this.form is wrong.
also, you might consider using the onsubmit event:
<form action="" method="get" onsubmit="testResults(this); return false">
<label for="username">
<!-- font awesome icon -->
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="submit" value="Login" />
</form>
Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.
I'm trying to get the div containing the login form to disappear when clicking the "Create an account" anchor then I would like to be able to reverse the process by clicking the "sign in" anchor on the registration form using Jquery.
I think I properly linked Jquery and the Js file in the head.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="script/jquery-3.1.1.js"></script>
<script src="script/javascript.js"></script>
</head>
Here's the new html
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
And here's the new javascript.js
$(document).ready(function(){
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
)};
Clicking on the anchors does nothing by the way.
Any help would be greatly appreciated, thanks in advance !
Change your HTML to this (I've added a class to each anchor).
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
Then replace your jQuery to this...
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
Use the .on() function in jQuery. It's much better for events like on-click etc.
Okay, guess I forgot to use the $(document).ready(function), then made a syntax error at the very end of my javascript.js because I wrote )}; instead of });
Thanks a lot !
Once you link you html to jquery and javascript correctly, the above code toggles as expected.
Add the code below to you css file to hide the Registration form on initial launch of the web page.
.register-form {
display: none;
}
I'm using mailto: protocol on my page (html). I have textarea field where user can write some text, now I want to include that text in body of email.
Any sugestions how to change the code, that the function will work as I wish?
My current code (contact-message:
<form id="contact-form" class="contact-form" action="contact.php" method="post">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Addresse" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Nachricht" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a class="submit" href="mailto:mail#adress.com?subject=Mail request&body=contact-message">Send mail</a>
</p>
<div id="response">
</div>
</form>
You can use javascript as
function sendMail()
{
var body = document.getElementById("contact_message").value;
window.location.href = "mailto:mail#example.org?subject=Mail request&body="+body;
}
Call function as
<a class="submit" onclick="sendMail()">Send mail</a>
function MyFunction(){
var email = document.getElementById("input").value;
window.location.href = "mailto:" + email + "?subject=Test email&body=Testing email";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="input"/>
<button onclick="MyFunction()">Click</button>
</body>
</html>
I´m building a mobile app in Jquery Mobile using phonegap to compile it to a native app.
Inside that app is a contact form and I can´t get it to work. I found this solution in stack overflow but even after doing exactly what the solution said, it throws back "Please fill all fields" alert.
Following are the codes i'm using.
HTML
<form action="#" method="get">
<div class="form-element">
<label for="FirstName">Firstname</label>
<input id="FirstName" name="FirstName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="LastName">Lastname</label>
<input id="LastName" name="LastName" type="text" placeholder="required" required />
</div>
<div class="form-element">
<label for="Email">Email</label>
<input id="Email" name="Email" type="email" placeholder="optional" />
</div>
<div class="form-element">
<label for="MessageText">Message</label>
<textarea id="MessageText" name="MessageText" placeholder="required" rows="5" required ></textarea>
</div>
<input type="button" value="submit"/>
</form>
javascript
// When the document has loaded...
$(document).ready(function(){
$('input[type="button"][value="submit"]').click(function() {
$.post('http://cafedeweb.com/www/handler.php', {
FirstName: $('#FirstName').val(),
LastName: $('#LastName').val(),
Email: $('#Email').val(),
MessageText: $('#MessageText').val()
// HTML function
}, function (html) {
// Place the HTML in a astring
var response=html;
// PHP was done and email sent
if (response=="success") {
alert("Message sent!");
} else {
// Error postback
alert("Please fill all fields!");
return false;
}
});
});
});
Your post url returns a 404 (http://cafedeweb.com/www/handler.php).
Make sure that you post your form to a webserver with a working php handler.