In: Computer Science
How would I fix my coding to allow the user to see what they have entered after they submit it? Where would I plug it into my code to see it?
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Registeration Form
Design</title>
<link rel="stylesheet" type="text/css"
href="../signintrial.css">
<script>
function loginHandler(){
// code for handing login event
}
function registerHandler() {
//checking phone number
if(phonenumber(document.getElementById('phone').value))
{
//when phone number is valid
document.getElementById('demo').innerHTML =
document.getElementById('fname').value + " " +
document.getElementById('lname').value + " " +
document.getElementById('street').value + " " +
document.getElementById('city').value + " " +
document.getElementById('zcode').value + " " +
document.getElementById('email').value + " " +
document.getElementById('phone').value + " " +
document.getElementById('username').value + " " +
document.getElementById('password').value;
}
}
//function to validate phone number
function phonenumber(inputtxt) {
//regular expression for phone number
var phoneno = /^ ( \( \d{3}\) | \d{3} ) [-\s] \d{3} -\d{4} /;
//checking phone number
if (inputtxt.match(phoneno)) {
//when phone number is valid
return true;
}
function loginHandler(){
// code for handing login event
}
function registerHandler() {
//checking phone number
if(phonenumber(document.getElementById('phone').value))
{
//when phone number is valid
document.getElementById('demo').innerHTML =
document.getElementById('fname').value + " " +
document.getElementById('lname').value + " " +
document.getElementById('street').value + " " +
document.getElementById('city').value + " " +
document.getElementById('zcode').value + " " +
document.getElementById('email').value + " " +
document.getElementById('phone').value;
}
}
//function to validate phone number
function phonenumber(inputtxt) {
//regular expression for phone number
var phoneno = /^ ( \( \d{3}\) | \d{3} ) [-\s] \d{3} -\d{4} /;
//checking phone number
if (inputtxt.match(phoneno)) {
//when phone number is valid
return true;
}
else{
// No need to use this anymore as error is shown through HTML
// alert("Phone number is invalid!");//alert to the user
return false;
}
}
</script>
</head>
<body>
<!--Adding Login and Registeration as two different divisions
with different class names-->
<!--Registration is also implemented using form tag-->
<!--Both the forms on submission have been handled by separate
functions in the javascript-->
<!-- onclick="loginHandler()" for login form -->
<!-- onclick="registerHandler()" for register form -->
<!--To get the similar alert for incorrect password pattern,
using the form tag will help-->
<!--added a new division for login section-->
<div class="login-section">
<h1> Login </h1>
<form action="" method="post">
Username:<input type="text" id="username" name="username"
minlength="4" maxlength="20" required><br><br>
Password:<input type="password" id="password" name="password"
required
pattern="(?=.*\d)(?=.*[@$!?])(?=.*[a-z])(?=.*[A-Z]).{4,12}"
title="Must contain at least one number and one uppercase and
lowercase and one special character from this list[@$!?], and
length between 4 to 20"><br><br>
<input type="submit" onclick="loginHandler()"
value="Submit">
</form><br>
</div>
<!--changed the class name to register-section from
login-page-->
<div class="register-section">
<!-- Added this form tag to get the HTML5 error alert if phone
number has not matched-->
<form>
<br>
<h1> Register </h1>
<input type="text" id="fname"
placeholder="first name" /><br><br>
<input type="text" id="lname" placeholder="last name"
/><br><br>
<input type="text" id="street" placeholder="street address"
/><br><br>
<input type="text" id="city" placeholder="city"
/><br><br>
<input type="text" id="zcode" placeholder="zip code"
/><br><br>
<input type="text" id="email" placeholder="email address"
/><br><br>
<!--added title attribute to show on error-->
<input type="text" id="phone" value=""
pattern="(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}"
placeholder="XXX-XXX-XXXX" required title="Phone number is invalid.
Must contain all digits in the format
XXX-XXX-XXXX"/><br><br>
<!-- changed the eventHandler name-->
<button
onclick="registerHandler()">Create</button><br>
<label for="create login" id="create
login"></label>
<p id="demo"></p>
</form>
</div>
</body>
</html>
Below is the Solution with output screenshot
HTML Code :
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Registeration Form Design</title>
<script>
function loginHandler() {
// code for handing login event
document.getElementById('login-details').innerHTML = "Your Input:" + "<br />" + "Username: " + document.getElementById('username').value + "<br />" + "Password: " + document.getElementById('password').value;
}
function registerHandler() {
//checking phone number
if (phonenumber(document.getElementById('phone').value)) {
//when phone number is valid
document.getElementById('demo').innerHTML = "Your Input:" + "<br />" + document.getElementById('fname').value + "<br /> " + document.getElementById('lname').value + "<br /> " + document.getElementById('street').value + "<br /> " + document.getElementById('city').value + "<br /> " + document.getElementById('zcode').value + "<br /> " + document.getElementById('email').value + "<br /> " + document.getElementById('phone').value + "<br /> " + document.getElementById('username').value + "<br /> " + document.getElementById('password').value;
}
}
//function to validate phone number
function phonenumber(inputtxt) {
//regular expression for phone number
var phoneno = /^(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}/;
//checking phone number
if (inputtxt.match(phoneno)) {
//when phone number is valid
return true;
}
}
</script>
</head>
<body>
<!--Adding Login and Registeration as two different divisions with different class names-->
<!--Registration is also implemented using form tag-->
<!--Both the forms on submission have been handled by separate functions in the javascript-->
<!-- onclick="loginHandler()" for login form -->
<!-- onclick="registerHandler()" for register form -->
<!--To get the similar alert for incorrect password pattern, using the form tag will help-->
<!--added a new division for login section-->
<div class="login-section">
<h1> Login </h1>
<form>
Username:
<input type="text" id="username" name="username" minlength="4" maxlength="20" required>
<br>
<br>Password:
<input type="password" id="password" name="password" required pattern="(?=.*\d)(?=.*[@$!?])(?=.*[a-z])(?=.*[A-Z]).{4,12}" title="Must contain at least one number and one uppercase and lowercase and one special character from this list[@$!?], and length between 4 to 20">
<br>
<br>
</form>
<input type="submit" onclick="loginHandler()" value="Submit">
<p id="login-details"></p>
<br>
</div>
<!--changed the class name to register-section from login-page-->
<div class="register-section">
<!-- Added this form tag to get the HTML5 error alert if phone number has not matched-->
<form>
<br>
<h1> Register </h1>
<input type="text" id="fname" placeholder="first name" />
<br>
<br>
<input type="text" id="lname" placeholder="last name" />
<br>
<br>
<input type="text" id="street" placeholder="street address" />
<br>
<br>
<input type="text" id="city" placeholder="city" />
<br>
<br>
<input type="text" id="zcode" placeholder="zip code" />
<br>
<br>
<input type="text" id="email" placeholder="email address" />
<br>
<br>
<!--added title attribute to show on error-->
<input type="text" id="phone" value="" pattern="(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="XXX-XXX-XXXX" required title="Phone number is invalid. Must contain all digits in the format XXX-XXX-XXXX" />
<br>
<br>
<!-- changed the eventHandler name-->
<!-- <button onclick="registerHandler()">Create</button> -->
<br>
<label for="create login" id="create login"></label>
</form>
<input type="submit" onclick="registerHandler();">
<p id="demo"></p>
</div>
</body>
</html>
Output :