Question
In: Computer Science
What is the best way to combined both of these codes to make it work all...
What is the best way to combined both of these codes to make it work all together?
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Registeration Form
Design</title>
<link rel="stylesheet" type="text/css" href="signin.css">
<script>
function myFunction(){
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;
}
</script>
</head>
<body>
<div class="login-page">
<div class="form">
<br>
<h1> Register </h1>
<input type="text" id="fname" placeholder="first
name"/>
<input type="text" id="lname" placeholder="last name"/>
<input type="text" id="street" placeholder="street
address"/>
<input type="text" id="city" placeholder="city"/>
<input type="text" id="zcode" placeholder="zip code"/>
<input type="text" id="email" placeholder="email
address"/>
<input type="text" id="phone" value=""
pattern="(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}"
placeholder="XXX-XXX-XXXX" required/>
<button onclick="myFunction()">Create</button>
<label for="create login" id="create
login"></label>
<p id="demo"></p>
</div>
</div>
</body>
</html>
I would like to plug in this part as well to make it work all together. Is there way to only have on submit or create button?
<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>
Solutions
Expert Solution
HTML FIle :
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Registeration Form Design</title>
<link rel="stylesheet" type="text/css" href="signin.css">
<script>
function myFunction() {
//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{
alert("Phone number is invalid!");//alert to the user
return false;
}
}
</script>
</head>
<body>
<div class="login-page">
<div class="form">
<br>
<h1> Register </h1>
<input type="text" id="fname" placeholder="first name" />
<input type="text" id="lname" placeholder="last name" />
<input type="text" id="street" placeholder="street address" />
<input type="text" id="city" placeholder="city" />
<input type="text" id="zcode" placeholder="zip code" />
<input type="text" id="email" placeholder="email address" />
<input type="text" id="phone" value="" pattern="(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}"
placeholder="XXX-XXX-XXXX" required />
<button onclick="myFunction()">Create</button>
<label for="create login" id="create login"></label>
<p id="demo"></p>
</div>
</div>
</body>
</html>
==============================================
Screen when phone number is invalid :
Screen when phone number is valid :
venereology answered 1 year agoRelated Solutions
If a message contains both positive and negative information, what is the best way to present...
What is the best way for senior project managers to ensure that all the financial aspects...
Software quality is not only about the correctiveness of codes (i.e. to make the program work)....
*** C language *** Make a list of all of the different zip codes that the zombies...
When performing musuloskeletal ROM assessment, what is the best way to remember all the steps in...
You work for a supermarket that is considering the best way to promote sales of its...
A classmate argues that “the best way to handle stress is to work harder and meet...
What is the best way to regulate insurance and why?
WHAT IS THE BEST WAY TO MOTIVATE AN EMPLOYEE AND WHY?
4. Phil and his wife, Traci, both work and have a combined gross income of $165,000...
- Note: The answers to the following questions should be typed in the block of comments in...
- Python Describe the procedure for setting up the display of an image in a window.
- what are the fundamental similarity and differences between gap and dgap?
- Maria Gonzales is a 57-year-old operating room nurse who works full-time at a local hospital. She...
- Use the bond term's below to answer the question Maturity 7 years Coupon Rate 4% Face...
- What experience have you had with Organization Development or with Change Management? Describe the organization, the...
- 1. Renfro Rentals has issued bonds that have a 12% coupon rate, payable semiannually. The bonds...