In: Computer Science
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>
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 :