Question

In: Computer Science

How would I add an automatic please fill out this info to my complete code. Something...

How would I add an automatic please fill out this info to my complete code. Something similar to this code.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<script>
   function phonenumber(inputtxt){
      
   var phoneno = (\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4};
  
   if(inputtxt.value.match(phoneno)){
       document.getElementById("yourEntry").innerHTML = document.getElementById("myphone").value;
   }
   //if(!inputtxt.value.match(phoneno)){
       // alert("Does not Work!")
       //}
   }
</script>
</head>

<body>
<form name="form1" action="#">
<input type="text" name="myphone" id="myphone" value="" pattern= "(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="(555) 555-1212" required />
<input type="submit" value="Submit" onclick="phonenumber(document.form1.myphone)"/>
</form>
Your results are as follows:
<p id="yourEntry">
</p>
</body>
</html>

How would I add an automatic please fill out this info to my complete code with also having the ability to have the user see the data that they filled out. How would I get both functions to work together?

<!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
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>

Solutions

Expert Solution

I have added the validator function for the password and phone number elements in the HTML file.

It will generate an alert if the password and phone number are not valid. If valid, it will simply print the input.

<!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
         var inputtxt=document.getElementById('password').value;
         var passw = /^(?=.*[0-9])(?=.*[@$!?])[a-zA-Z0-9@$!?]{4,20}$/;
         if(inputtxt.match(passw)) 
         { 
         document.getElementById('login-details').innerHTML = "Your Input:" + "<br />" + "Username: " + document.getElementById('username').value + "<br />" + "Password: " + document.getElementById('password').value;
         }
         else
         { 
         alert('Password must contain at least one number and one uppercase and lowercase and one special character from this list[@$!?], and length between 4 to 20')
         return false;
         }
         
         }
         
         function registerHandler() {
         //checking phone number
         
         if(phonenumber()) { 
         //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() {
                //regular expression for phone number
                var phone = document.getElementById("phone").value;
                var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
         //checking phone number
         if(phone.match(phoneNum)) {
         //when phone number is valid
         return true;
         }
         else{
         alert('Phone number is invalid. Must contain all digits in the format XXX-XXX-XXXX')}
         }
      </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>

venereology answered 1 year ago
Next > < Previous

Related Solutions

I have an unexpected indent with my python code. please find out whats wrong with my...
I have an unexpected indent with my python code. please find out whats wrong with my code and run it to show that it works here is the code : def main(): lis = inputData() customerType = convertAcct2String(lis[0]) bushCost = getBushCost(lis[0],int(lis[1],10)) flowerCost = getFlowerBedCost(int(lis[2],10),int(lis[3],10)) fertiCost = getFertilCost(int(lis[4],10)) totalCost = calculateBill(bushCost,fertiCost,flowerCost) printReciept(customerType,totalCost,bushCost,fertiCost,flowerCost) def inputData(): account, number_of_bushes,flower_bed_length,flower_bed_width,lawn_square_footage = input("Please enter values").split() return [account, number_of_bushes,flower_bed_length,flower_bed_width,lawn_square_footage] def convertAcct2String(accountType): if accountType== "P": return "Preferred" elif accountType == "R": return "Regular" elif accountType == "N": return...
How do I add the information below to my current code that I have also posted...
How do I add the information below to my current code that I have also posted below. <!DOCTYPE html> <html> <!-- The author of this code is: Ikeem Mays --> <body> <header> <h1> My Grocery Site </h1> </header> <article> This is web content about a grocery store that might be in any town. The store stocks fresh produce, as well as essential grocery items. Below are category lists of products you can find in the grocery store. </article> <div class...
I actually would like you to take a look at my code and point it out...
I actually would like you to take a look at my code and point it out if there is anything wrong with it. I think there might be because there are some values that are the same in different arrays. QUESTION: C++ Use the random number generator in class Random to store a list of 1000 random integer values in an array. Create 3 arrays using this method. Apply each of the insertion, bubble, selection and shell sort algorithms to...
Please add to this Python, Guess My Number Program. Add code to the program to make...
Please add to this Python, Guess My Number Program. Add code to the program to make it ask the user for his/her name and then greet that user by their name. Please add code comments throughout the rest of the program If possible or where you add in the code to make it ask the name and greet them before the program begins. import random def menu(): print("\n\n1. You guess the number\n2. You type a number and see if the...
Please carefully review the code to fill in after the given instructions and complete the code...
Please carefully review the code to fill in after the given instructions and complete the code for me. Thank you in advance. In this problem, we will implement a simple dictionary of common words in the English language, represented as an array of words paired with their lengths. You will need to implement each of the below methods in the Dictionary class. In this problem, the first line of input represents the method to call. It will be one of...
Please edit, rephrase or add something to the following part of my report. Question:Whether debt funding...
Please edit, rephrase or add something to the following part of my report. Question:Whether debt funding would be desirable, or even possible for the new equipment required should the company decide to pursue aggressive expansion – noting that the equipment used by the business is quite specialised and cannot easily be sold and taken to another company. Answer:Debt funding is not adviseable as these assets are specialised and resale would not be easy .An Operating lease option would be preferred...
How would I make it so that when I run my code it does not ask...
How would I make it so that when I run my code it does not ask for input (not having to enter after the statement and enter 0 for example) after ROXY (Forever ROXY Enterprises) appears? Like it would tell me the second statement right away along with the Roxy phrase. This is in C++. My code: #include / #include using std::endl; int main() {    void readAndConvert();    unsigned int stockSymbol;    unsigned int confNum;    std::cout << "ROXY...
Also please add comments on the code and complete in C and also please use your...
Also please add comments on the code and complete in C and also please use your last name as key. The primary objective of this project is to increase your understanding of the fundamental implementation of Vigenere Cipher based program to encrypt any given message based on the Vignere algorithm. Your last name must be used as the cipher key. You also have to skip the space between the words, while replicating the key to cover the entire message. Test...
Python I want to name my hero and my alien in my code how do I...
Python I want to name my hero and my alien in my code how do I do that: Keep in mind I don't want to change my code except to give the hero and alien a name import random class Hero:     def __init__(self,ammo,health):         self.ammo=ammo         self.health=health     def blast(self):         print("The Hero blasts an Alien!")         if self.ammo>0:             self.ammo-=1             return True         else:             print("Oh no! Hero is out of ammo.")             return False     def...
how do I fill out the bank reconciliation
how do I fill out the bank reconciliation
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT