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 :


Related Solutions

If a message contains both positive and negative information, what is the best way to present...
If a message contains both positive and negative information, what is the best way to present the negative information (see Chapters 7 & 8)?
What is the best way for senior project managers to ensure that all the financial aspects...
What is the best way for senior project managers to ensure that all the financial aspects of a project are completed and documented
Software quality is not only about the correctiveness of codes (i.e. to make the program work)....
Software quality is not only about the correctiveness of codes (i.e. to make the program work). Provide at least two different aspects of software quality other than coding. Then tell what you have done to improve software quality in your group project.
*** C language *** Make a  list of all of the different zip codes that the zombies...
*** C language *** Make a  list of all of the different zip codes that the zombies live at and a count of how many zombies live at that zip code. The list should be sorted based on the zip code with the smallest zip code printed first. Example: Zip Code # Zombies 31234 2 //variables int zip[] = {37643,31234,32785,32643,32785,32643,31234,31234,32643,32643,31234,32785,32785,32643,31234}; char zombie[]={'N','Y','Y','N','Y','Y','Y','N','Y','Y','N','Y','Y','Y','Y'}; Y = zombie N = Not zombie int zPatient = 0; int nonZpatient = 0; for(int pt = 0;...
When performing musuloskeletal ROM assessment, what is the best way to remember all the steps in...
When performing musuloskeletal ROM assessment, what is the best way to remember all the steps in testing each joint movement and strength?
You work for a supermarket that is considering the best way to promote sales of its...
You work for a supermarket that is considering the best way to promote sales of its store-brand canned vegetables. Store managers believe allocating additional shelf space to the store-brand canned vegetables would create additional sales. Company executives, on the other hand, believe increasing advertising expenditures would be a more effective strategy to expand sales. Complete a regression analysis to help answer this question (use the CANVEG Excel file posted on Canvas). NOTE: consider only a simple linear model, a multiple...
A classmate argues that “the best way to handle stress is to work harder and meet...
A classmate argues that “the best way to handle stress is to work harder and meet life's challenges head-on.” Evaluate both the strengths and the weaknesses of your classmate's position in light of the distinction between coping with stress and managing stress.
What is the best way to regulate insurance and why?
What is the best way to regulate insurance and why?
WHAT IS THE BEST WAY TO MOTIVATE AN EMPLOYEE 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...
4. Phil and his wife, Traci, both work and have a combined gross income of $165,000 per year. Phil used the Total Expense Ratio to calculate an affordable monthly payment of $2100. Suppose the couple can get a 30 year loan with a rate of 4.5%, how much can they afford to borrow? a. Write the Excel formula used.____________________________________ b. How much can they afford to borrow? __________________________
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT