I would like to have my code return the HTML input using an alert.
I tried to with this code, below, but the output was nothing. I am pretty sure that its not the button...
<center>
<h3>Enter The Username And Password To Unlock This Computer</h3>
<script>
function incorrect() {
var user = document.getElementById("username");
var pass = document.getElementById("password");
text = "the username '" + user + "' is incorrect, and the password '" + pass + "' is also incorrect"
console.log(text)
alert(text)
}
</script>
<form>
<h6>Username</h6><input type="text" id="username" name="username" value="">
<h6>Password</h6><input type="text" id="password" name="password" value="">
<br><button type="button" onclick="incorrect">Unlock</button>
</form>
</center>
Do you want the text that is being typed in or just the html input block?
<center>
<h3>Enter The Username And Password To Unlock This Computer</h3>
<script>
function incorrect() {
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
text = "the username '" + user + "' is incorrect, and the password '" + pass + "' is also incorrect"
console.log(text)
alert(text)
}
</script>
<form>
<h6>Username</h6><input type="text" id="username" name="username" value="">
<h6>Password</h6><input type="text" id="password" name="password" value="">
<br><button type="button" onclick="incorrect()">Unlock</button>
</form>
</center>
the problem is about braces, you should use <br><button type="button" onclick="incorrect()">Unlock</button>
function incorrect(){
var user = document.getElementById("username");
var pass = document.getElementById("password");
text = "the username '"+user+"' is incorrect, and the password '"+pass+"' is also incorrect"
console.log(text)
alert(text)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<center>
<h3>Enter The Username And Password To Unlock This Computer</h3>
<form>
<h6>Username</h6><input type="text" id="username" name="username" value="">
<h6>Password</h6><input type="text" id="password" name="password" value="">
<br><button type="button" onclick="incorrect()">Unlock</button>
</form>
</center>
</body>
</html>
<input type="text" class="input">
<button class="button">sad</button>
let t = document.querySelector('.button');
t.addEventListener('click', function () {
let y = document.querySelector('.input').value;
console.log(y);
});
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>
Here I'm trying to execute the following code but it throws the above error in console log in website page, I am unable to identify the error .
I have coded this webpage in such a way that it should show an error like "enter the user name" and "enter the password" whenever the input boxes are left empty but instead of this it is showing an uncaught type error. Kindly help me to find the solution.
my github code link is:https://github.com/harish-123445/login-form-using-html-css-javascript
function vfun(){
var uname=document.forms["myform"]["uname"].value;
var pword=document.forms["myform"]["pword"].value;
if(uname==null || uname=="" ){
document.getElementById("errorBox").innerHTML =
"enter the user name";
return false;
}
if(pword==null || pword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" placeholder="enter username" >
<p>PASSWORD </p>
<input type="password" name="pword" placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
I have edited your code. I have called your username and password using getElementById and your two error boxes with different id names and now it is working fine.
function vfun(){
var uname=document.getElementById("name").value;
var psword=document.getElementById("passw").value;
if(uname==null || uname=="" ){
document.getElementById("errorBox2").innerHTML =
"enter the user name";
return false;
}
if(psword==null || psword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" id="name"
placeholder="enter username" >
<div id="errorBox2"></div>
<p>PASSWORD </p>
<input type="password" name="pword" id="passw"
placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
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 = "";
}
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!!