Question

In: Computer Science

How would I fix my coding to allow the user to see what they have entered...

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>

Solutions

Expert Solution

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 :

venereology answered 2 days ago
Next > < Previous

Related Solutions

I Have practice PICOT questions that I would like to see if my answers are close...
I Have practice PICOT questions that I would like to see if my answers are close to correct. Read the scenario, choose the one form of PICOT question that fits the scenario. state if its INTERVENTION ETIOLOGY, DIAGNOSIS OR DIAGNOSTIC TEST, PROGNOSIS/PREDICTION, or MEANING PICOT Scenarios 1. The patient is a 73-year-old white woman admitted to the hospital with heart failure. She is compliant and seldom misses her medications. On admission, her medications were furosemide 40 mg po qd, enalapril...
I Have practice PICOT questions that I would like to see if my answers are close...
I Have practice PICOT questions that I would like to see if my answers are close to correct. Read the scenario, choose the one form of PICOT question that fits the scenario. state if its INTERVENTION ETIOLOGY, DIAGNOSIS OR DIAGNOSTIC TEST, PROGNOSIS/PREDICTION, or MEANING. I have to use these templates for creating the PICOT question. Question Templates for Asking PICOT Questions INTERVENTION In ____________________(P), how does ____________________ (I) compared to ____________________(C) affect _____________________(O) within ___________(T)? ETIOLOGY Are____________________ (P), who have...
My neighbor decided to fix up his house. I was excited because that meant it would...
My neighbor decided to fix up his house. I was excited because that meant it would improve my properties value. My neighbor contracted with TDH Associates to repair his roof, paint his house and do some landscaping.   TDH Associates do not fulfill their obligations. Using IRAC, if I sue TDH Associates what is the outcome?
In this week's problem, I interviewed my cycling group to see how many have participated in...
In this week's problem, I interviewed my cycling group to see how many have participated in a Triathlon. I hypothesized that the population mean number of people who participated is 4, and my random sample results were: 2,7,3,2,3,0,0. I am choosing to test this hypothesis at the 0.1 significance level.
Why my net pay is always 0, and how can I fix it ? here's the...
Why my net pay is always 0, and how can I fix it ? here's the code #include <iostream> #include <fstream> #include <iomanip> #include <cmath> using namespace std; int main() { ofstream out; out.open("myData.txt"); string fname;    cout << "name?" << endl; cin >> fname; double salary; cout << "salary?" << endl; cin >> salary;    double fedTax = salary * 15 / 100; double stateTax = salary* 3.5 / 100; double SST = salary * 5.75 / 100; double...
JAVA: How do I fix the last "if" statement in my code so that outputs the...
JAVA: How do I fix the last "if" statement in my code so that outputs the SECOND HIGHEST/MAXIMUM GPA out of the given classes? public class app { private static Object minStudent; private static Object maxStudent; public static void main(String args[ ]) { student st1 = new student("Rebecca", "Collins", 22, 3.3); student st2 = new student("Alex", "White", 19, 2.8); student st3 = new student("Jordan", "Anderson", 22, 3.1); student[] studentArray; studentArray = new student[3]; studentArray[0] = st1; studentArray[1] = st2; studentArray[2]...
How do I fix the "error: bad operand types for binary operator '*' " in my...
How do I fix the "error: bad operand types for binary operator '*' " in my code? What I am trying to do: double TotalPrice = TicketPrice * NoOfTickets;       My code: import javax.swing.*; /*provides interfaces and classes for different events by AWT components*/ import java.awt.event.*; import javax.swing.JOptionPane; //TicketReservation.java class TicketReservation { public static void main(String args[]) { /*Declare JFrame for place controls.*/ JFrame f= new JFrame("Movie Ticket Reservation");                                   /*Declare JLabels*/ JLabel...
1. Allow the user to vote as many times as they indicated there are voters (see...
1. Allow the user to vote as many times as they indicated there are voters (see numVoters). For each voter, you have to display the list ofcandidates and their associated id number (id numbers should start at 1, not 0). A voter votes for a candidate by entering the candidate's id number. 2. You have to devise a method for keeping tracks of the votes. 3. After all the voters have voted, you have to print out the results for...
Hello I have this error in the code, I do not know how to fix it....
Hello I have this error in the code, I do not know how to fix it. It is written in C++ using a Eclipse IDE Error: libc++abi.dylib: terminating with uncaught exception of type std::out_of_range: basic_string bus.h =========== #pragma once #include using namespace std; class Bus { private:    string BusId; // bus ID    string Manufacturer; // manufacturer of the bus    int BusCapacity; // bus capacity    int Mileage; // mileage of bus    char Status; // current status...
My sharpe Ratio for my portfolio is 1.08. What does this mean? Or how would i...
My sharpe Ratio for my portfolio is 1.08. What does this mean? Or how would i describe my number.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT