I am trying to make a registration and login form using javascript, it's like, once a user registers the data is stored in an array and then that data is used to authenticate the user and display the user details on the page, after logging in the alert is not popping, Please help! thanks in advance.
Following is my register.html and controller.js-
register.html
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>Register</title>
<style>
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
</style>
</head>
<body>
<form>
<h1>Please enter data</h1> FirstName:
<input id="firstname" type="text" placeholder="FirstName" />
<br> LastName :
<input id="lastname" type="text" placeholder="LastName" />
<br> Email ID :
<input id="email" type="text" placeholder="Email" />
<br> UserName :
<input id="username" type="text" placeholder="UserName" />
<br> Password :
<input id="password" type="password" placeholder="Password" />
<br>
<input type="button" value="Register" onclick="insert()" />
</form>
<!--Login form-->
<div id="demo" style="display:none">
<div class="container">
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<input type="button" value="Login" id="submit" onclick="validate()" />
</form>
</div>
</div>
<br>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Login!</button>
<div id="display"></div>
<script src="D:/Xperience/js/controller.js">
</script>
</body>
</html>
controller.js
var users = [];
localStorage.setItem("keyforusers", JSON.stringify(users));
var idInput = (users.length) + 1;
var firstnameInput = document.getElementById("firstname");
var lastnameInput = document.getElementById("lastname");
var emailInput = document.getElementById("email");
var usernameInput = document.getElementById("username");
var passwordInput = document.getElementById("password");
var messageBox = document.getElementById("display");
function userdetails(id, firstname, lastname, email, username, password) {
this.id = id;
this.firstname = firstname;
this.lastname = lastname;
this.email = email;
this.username = username;
this.password = password;
}
function insert() {
var user = new userdetails(idInput.value, firstnameInput.value, lastnameInput.value, emailInput.value, usernameInput.value, passwordInput.value);
users.push(user);
//Clear the fields
firstnameInput.value = "";
lastnameInput.value = "";
emailInput.value = "";
usernameInput.value = "";
passwordInput.value = "";
}
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
ulen = users.length;
for (i = 0; i < ulen; i++) {
if (username == users[i].username && password == users[i].password) {
alert("Logged in successfully");
}
}
username.value = "";
password.value = "";
}
Related
If I click the generate button I want the following passwords to appear "abcd" "1234" "!##$" in the three empty boxes but I missed my class about this lesson and when I tried to watch youtube videos about it I get confused so can anyone help me on How to put the passwords "abcd" "1234" "!##$" in the 3 empty boxes if I press the generate button? Thank you in advance
<html>
<head>
<h1><center>Hi! there, to enter to our website please generate your Three(3) password token and use it to Enter<center></h1>
</head>
<script>
var counter=3;
function validate()
{
while(counter>=1)
{
var token1="abcd";
var token2="1234";
var token3="!##$";
var checkToken=document.getElementById("getToken").value;
if(checkToken===token1 || checkToken===token2)
{
document.write("<center>password correct. Please click the link:");
document.write('<br> Check our site');
}
else
{
counter=counter-1;
alert("Incorrect password!\n\n Attempts left: "+counter);
if(counter==0)
{
document.write("please contact our security team.");
}
break;
}
}
}
</script>
<script>
function generate()
var pass1="abcd";
var pass2="1234";
var pass3="!##$";
</script>
<body>
<center>
<p>Generate password token</p>
<input type="text" placeholder="Create password" id="password1" readonly />
<input type="text" placeholder="Create password" id="password2" readonly />
<input type="text" placeholder="Create password" id="password3" readonly />
<br>
<input type="button" value="Generate Token" onclick="generate()">
<p>Enter password token below to continue:</p>
<input type="password" placeholder="Enter password" id="getToken">
<br>
<input type="button" value="Validate Token" onclick="validate()">
</center>
</body>
So I tried doing this but it did not work
function generate()
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
getElementById(password).innerHtml = pass1;
getElementById(passwords).innerHtml = pass2;
getElementById(passwordss).innerHtml = pass3;
Oh my God I figured it out So the correct one is
<script>
function generate(){
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
document.getElementById("password").value=pass1;
document.getElementById("passwords").value=pass2;
document.getElementById("passwordss").value=pass3;
}
</script>
I changed Innerhtml to value and I was missing {}
<html>
<head>
<h1><center>Hi! there, to enter to our website please generate your Three(3) password token and use it to Enter<center></h1>
</head>
<script>
var counter=3;
function validate()
{
while(counter>=1)
{
var token1="abcd";
var token2="1234";
var token3="!##$";
var checkToken=document.getElementById("getToken").value;
if(checkToken===token1 || checkToken===token2)
{
document.write("<center>password correct. Please click the link:");
document.write('<br> Check our site');
}
else
{
counter=counter-1;
alert("Incorrect password!\n\n Attempts left: "+counter);
if(counter==0)
{
document.write("please contact our security team.");
}
break;
}
}
}
</script>
<script>
function generate(){
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
document.getElementById("password").value=pass1;
document.getElementById("passwords").value=pass2;
document.getElementById("passwordss").value=pass3;
}
</script>
<body>
<center>
<p>Generate password token</p>
<input type="text" placeholder="Create password" id="password" readonly />
<input type="text" placeholder="Create password" id="passwords" readonly />
<input type="text" placeholder="Create password" id="passwordss" readonly />
<br>
<input type="button" value="Generate Token" onclick="generate()">
<p>Enter password token below to continue:</p>
<input type="password" placeholder="Enter password" id="getToken">
<br>
<input type="button" value="Validate Token" onclick="validate()">
</center>
</body>
this is my html code please have a look.
and the below is my js code please help me with highlighting the data.
in this code i reading the data from the xml file and then printing it on the web page using js and then i want to get the selected data by user to be highlited on the form.
in the xml file whole the infromation of the customer has given.
Html Code
<!DOCTYPE html>
<html>
<head>
<title>Client Rental</title>
<link rel="stylesheet" type="text/css" href="classdemo_2.css">
<script type="text/javascript"enter code here src="jsonfilehandler.js"></script>
</head>
<body>
<header><h1>Client Rental Information</h1> <img src="1.png">
</header>
<h2>Search the Client Below</h2>
<table>
<tr><td>Search By Last Name</td><td></td><td></td><td><input type="text" size="30" id="lastname"></td></tr>
</table>
<br>
<h3 id="searchvalue"></h3>
<br>
<table id="searchresults" ></table>
<form id="register" onsubmit="register();return false">
<table class="form">
<tr><td>Last Name</td><td><input type="text" id="lastname" size="15" pattern="[A-Za-z]{1,15}" required="true"></td></tr>
<tr><td>First Name</td><td><input type="text" id="firstname" size="15" pattern="[A-Za-z]{1,15}" required="true"></td></tr>
<tr><td>Address</td><td><input type="text" id="address" size="25" required="true"></td></tr>
<tr><td>Sate_province</td><td><input type="text" id="state" placeholder="state" size="15" required="true"></td></tr>
<tr><td>Email</td><td><input type="email" id="email" placeholder="example#example.com" size="20" required="true"></td></tr>
<tr><td>Phone Number</td><td><input type="phone" id="phone" placeholder="A1A1A1" size="15" required="true"></td></tr>
</table>
<input type="submit" value="Submit">
</form>
<footer class="footer">
Contact information
</footer>
</table>
</body>
</html>
Js Code:-
/*jsonfilehandler.js*/
var xhr = new XMLHttpRequest();
var r;
var index;
window.onload=loaddata;
function loaddata() {
//event listener
document.getElementById("lastname").addEventListener("keyup", function (){ searchFullName(this.value);},false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
r = JSON.parse(xhr.responseText);
//displayData(r);
}
};
xhr.open("GET", "rentalclients.json", true);
xhr.send();
}
function searchFullName(name) {
//var r=JSON.parse(xhr.responseText);
var output=" ";
var searchname;
var displayRadiobuttons= "";
for(var i=0; i<r.length; i++)
{
var obj=r[i];
searchname=obj.last_name;
if(searchname.toLowerCase().startsWith(name))
{
obj=obj.last_name+"\t\t\t\t"+obj.first_name;
displayRadiobuttons+="<input type=radio name=listitem";
displayRadiobuttons += " value=" + i + " ";
displayRadiobuttons+= "onclick=if(this.checked) {setClientObject(searchname)}>";
displayRadiobuttons+=obj+ "<br>";
}
}
document.getElementById("searchresults").innerHTML=displayRadiobuttons;
//displayRadiobuttons= onclick=if(this.checked){setClientObject()};
}
function setClientObject(myname) {
var c=0;
alert(c);
index=i;
var dataitem;
var clientobject = {
lastname,
firstname,
address,
postalcode,
state,
email,
phone
};
var searchname;
for(var i=0; i<r.length; i++)
{
var obj=r[i];
searchname=obj.last_name;
if(searchname.toLowerCase().startsWith(name))
{
clientobject.lastname = document.getElementByTagName("last_name").value;
clientobject.firstname = document.getElementByTagName("first_name").value;
clientobject.address = document.getElementByTagName("address").value;
clientobject.postalcode = document.getElementByTagName("state_prov").value;
clientobject.email = document.getElementByTagName("email").value;
clientobject.phone = document.getElementByTagName("phone").value;
}
}
//input variables into clientobject
document.getElementById("lastname").value = clientobject.lastname;
document.getElementById("firstname").value = clientobject.firstname;
document.getElementById("address").value = clientobject.address;
document.getElementById("state").value = clientobject.state;
document.getElementById("email").value = clientobject.phone;
document.getElementById("phone").value = clientobject.state;
}```
I reformatted the code, but I still don't know what you are trying to accomplish.
<html>
<!DOCTYPE html>
<html>
<head>
<title>Client Rental</title>
<link rel="stylesheet" type="text/css" href="classdemo_2.css">
<script type="text/javascript"enter code here src="jsonfilehandler.js"></script>
</head>
<body>
<header><h1>Client Rental Information</h1> <img src="1.png">
</header>
<h2>Search the Client Below</h2>
<table>
<tr><td>Search By Last Name</td><td></td><td></td><td><input type="text" size="30" id="lastname"></td></tr>
</table>
<br>
<h3 id="searchvalue"></h3>
<br>
<table id="searchresults" ></table>
<form id="register" onsubmit="register();return false">
<table class="form">
<tr><td>Last Name</td><td><input type="text" id="lastname" size="15" pattern="[A-Za-z]{1,15}" required="true"></td></tr>
<tr><td>First Name</td><td><input type="text" id="firstname" size="15" pattern="[A-Za-z]{1,15}" required="true"></td></tr>
<tr><td>Address</td><td><input type="text" id="address" size="25" required="true"></td></tr>
<tr><td>Sate_province</td><td><input type="text" id="state" placeholder="state" size="15" required="true"></td></tr>
<tr><td>Email</td><td><input type="email" id="email" placeholder="example#example.com" size="20" required="true"></td></tr>
<tr><td>Phone Number</td><td><input type="phone" id="phone" placeholder="A1A1A1" size="15" required="true"></td></tr>
</table>
<input type="submit" value="Submit">
</form>
<footer class="footer">
Contact information
</footer>
</table>
</body>
<script>
var xhr = new XMLHttpRequest();
var r;
var index;
window.onload=loaddata;
function loaddata() {
//event listener
document.getElementById("lastname").addEventListener("keyup", function (){ searchFullName(this.value);},false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
r = JSON.parse(xhr.responseText);
//displayData(r);
}
};
xhr.open("GET", "rentalclients.json", true);
xhr.send();
}
function searchFullName(name) {
//var r=JSON.parse(xhr.responseText);
var output=" ";
var searchname;
var displayRadiobuttons= "";
for(var i=0; i<r.length; i++)
{
var obj=r[i];
searchname=obj.last_name;
if(searchname.toLowerCase().startsWith(name))
{
obj=obj.last_name+"\t\t\t\t"+obj.first_name;
displayRadiobuttons+="<input type=radio name=listitem";
displayRadiobuttons += " value=" + i + " ";
displayRadiobuttons+= "onclick=if(this.checked) {setClientObject(searchname)}>";
displayRadiobuttons+=obj+ "<br>";
}
}
document.getElementById("searchresults").innerHTML=displayRadiobuttons;
//displayRadiobuttons= onclick=if(this.checked){setClientObject()};
}
function setClientObject(myname) {
var c=0;
alert(c);
index=i;
var dataitem;
var clientobject = {
lastname,
firstname,
address,
postalcode,
state,
email,
phone
};
var searchname;
for(var i=0; i<r.length; i++)
{
var obj=r[i];
searchname=obj.last_name;
if(searchname.toLowerCase().startsWith(name))
{
clientobject.lastname = document.getElementByTagName("last_name").value;
clientobject.firstname = document.getElementByTagName("first_name").value;
clientobject.address = document.getElementByTagName("address").value;
clientobject.postalcode = document.getElementByTagName("state_prov").value;
clientobject.email = document.getElementByTagName("email").value;
clientobject.phone = document.getElementByTagName("phone").value;
}
}
//input variables into clientobject
document.getElementById("lastname").value = clientobject.lastname;
document.getElementById("firstname").value = clientobject.firstname;
document.getElementById("address").value = clientobject.address;
document.getElementById("state").value = clientobject.state;
document.getElementById("email").value = clientobject.phone;
document.getElementById("phone").value = clientobject.state;
}
</script>
</html>
I'm trying to build an array in javascript from user input on my HTML form. It seems the array is building fine until it gets to the .push, I then get an error
employeeid undefined
, even though I know it's being populated and I can see this when I run debug mode.
HTML
<div class="wel" align="left">
<form class="form-signin">
<p>
<input type="text" class="form-control" id="EmployeeID" name="EmployeeID" placeholder="EmployeeID" required="" autofocus="" />
</p>
<p>
<input type="text" class="form-control" id="fullname" name="fullname" placeholder="FullName" required="" autofocus="" />
</p>
<p>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" required="" autofocus="" />
</p>
<p>
<input type="email" class="form-control" id="Email" name="Email" placeholder="Email" required="" autofocus="" />
</p>
<p>
<input type="password" class="form-control" id="Password" name="Password" placeholder="password" required="" autofocus="" />
</p>
<p>
<input type="password" class="form-control" id="Password1" name="ConfirmPassword" placeholder="password" required="" autofocus="" />
</p>
<a id='subButton' class="btn btn-primary btn-lg" style="vertical-align: bottom">submit</a>
</form>
</div
javascript
$(document)
.ready(function() {
var arrayDetails = new Array();
var holdingArray = new Array();
function newEntry(employeeId, fullname, username, email, password) {
this.employeeId = employeeId;
this.fullname = fullname;
this.username = username;
this.email = email;
this.Password = password;
}
$("#subButton")
.click(function () {
debugger;
var success = true;
var password = document.getElementById("Password");
var password1 = document.getElementById("Password1");
if (password.value !== password1.value)
{
alert("Password do not match");
}
else
{
var employeeIdEntered = document.getElementById("EmployeeID").value;
if (employeeIdEntered === "") {
success = false;
}
var fullnameentered = document.getElementById("fullname").value;
if (fullnameentered === "") {
success = false;
}
var usernameEntered = document.getElementById("username").value;
if (usernameEntered === "") {
success = false;
}
var emailEntered = document.getElementById("Email").value;
if (emailEntered === "") {
success = false;
}
var passwordEnterned = document.getElementById("Password").value;
if (passwordEnterned === "") {
success = false;
}
var entry = newEntry(employeeIdEntered,
fullnameentered,
usernameEntered,
emailEntered,
passwordEnterned);
arrayDetails.push(entry);
};
if (success)
{
sendToController();
} else
{
alert("");
}
});
Your newEntry() function is missing a return statement. Don't add the attributes to this, do instead a
function newEntry(employeeId, fullname, username, email, password) {
var res = {};
res.employeeId = employeeId;
res.fullname = fullname;
res.username = username;
res.email = email;
res.Password = password;
return res;
}
This is my first time with javascript. I'm making a basic login page where there is a control for the email input. I would like to put an error message of some kind when someone gives an email address with illegal symbol. Here my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var result = email.search("/[^(a-z | A-Z | 0-9 | #)]/");
if(result !== -1)
{
emailObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
</html>
I have a function I use to validate email addresses, it uses regex. I would suggest jQuery just to show/hide the error message.
function validEmail(val){
if(val.length < 6 || val.length > 255) return false;
return new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val);
}
$(function(){
$("#email").on("change", function(){
var email = $("#email").val();
if(!validEmail(email)){
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Some Inputs here -->
<span id='emailError' style='display: none;'>Please enter a valid email address</span><br>
<input type='email' id='email' name='email' placeholder='Email Address' />
<!-- More Inputs here -->
<button type='submit'>Submit</button>
</form>
you're trying to append something to an input element (email input, in this case). I'd suggest to append it to your main div, which in this case I have identified as "YOUR_ID".
Also, I suggest you a more efficint way to check a valid email.
follow the below example
<body>
<div id="YOUR_ID">
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var divObject = document.getElementById("YOUR_ID");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var check = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var result = check.test(email);
if(result !== -1)
{
divObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
this is my code
i was trying to make a signup form and i made a script
i jst tried that the username should contain both alphabets and numbers and nothing else
if this condition is true than it continues
else it will give an error message displayed jst below it
<html>
<head>
</head>
<body>
<style>
#sign_up_details {
padding: 10px;
}
</style>
<form name="sign_up_details">
<h3>Enter your details below</h3>
<input type="textbox" id="username" placeholder="Enter your desired username" />
<p id="usrnm_check"></p><br>
<input type="password" id="password" placeholder="Enter your desired password" />
<p id="pass_check"></p><br>
<input type="textbox" id="email" placeholder="Enter your email id" />
<p id="email_check"></p><br>
<input type="submit" name="submit" value="Submit" onclick="store()" />
</form>
<script>
var usrnm = document.getElementById("username");
var pass = document.getElementById("password");
var email = document.getElementById("email");
var usrnm_check = document.getElementById("usrnm_check");
var pass_check = document.getElementById("pass_check");
var email_check = document.getElementById("email_check");
function store() {
var newReg = /^[A-Z]+[a-z]+[0-9]+$/
if (usrnm.value.match(newReg)) {
//next action here
} else {
usrnm_check.innerHTML = "Username should have alphabets and numbers";
}
}
</script>
</body>
</html>
for eg when i keep the username field empty and click on submit the error which is to be displayed comes below it but it soon disappears.
i dont know the reason for it.
you will have to set the store in onsubmit event and not on the submit button onclick event because,onclick will execute the function and submit the form as well.
here is fiddle
execute function before submit
<html>
<head>
</head>
<body>
<style>
#sign_up_details {
padding: 10px;
}
</style>
<form name="sign_up_details" onsubmit="return store()">
<h3>Enter your details below</h3>
<input type="textbox" id="username" placeholder="Enter your desired username" />
<p id="usrnm_check"></p><br>
<input type="password" id="password" placeholder="Enter your desired password" />
<p id="pass_check"></p><br>
<input type="textbox" id="email" placeholder="Enter your email id" />
<p id="email_check"></p><br>
<input type="submit" name="submit" value="Submit" />
</form>
<script>
var usrnm = document.getElementById("username");
var pass = document.getElementById("password");
var email = document.getElementById("email");
var usrnm_check = document.getElementById("usrnm_check");
var pass_check = document.getElementById("pass_check");
var email_check = document.getElementById("email_check");
function store() {
var newReg = /^[A-Z]+[a-z]+[0-9]+$/
if (usrnm.value.match(newReg)) {
//next action here
return true;
} else {
usrnm_check.innerHTML = "Username should have alphabets and numbers";
return false;
}
}
</script>
</body>
</html>
You can try something like this:
<form action="/dosomething.htm" method="GET" onsubmit="return store(this)">
[...]
<input type="submit" value="Go">
</form>
<script type="text/javascript">
function store() {
var newReg = /^[A-Z]+[a-z]+[0-9]+$/
if (usrnm.value.match(newReg)) {
//next action here
return true;
} else {
usrnm_check.innerHTML = "Username should have alphabets and numbers";
return false;
}
}
</script>
Notice return true and return false statements in store() and in form onSubmit. If the store() will return false the form will not get submitted. At present your message goes away after display because your form gets submitted even if the validation fails.
Hope this helps!!