Question

Using Notepad++, copy the code presented in Listing 26.2, "A Form That Displays Data in a...

Using Notepad++, copy the code presented in Listing 26.2, "A Form That Displays Data in a Pop-Up Window," in the subsection "Displaying Data From a Form" in the section "Accessing Form Elements With JavaScript" in Ch. 26, "Working with Web-Based Forms of Sams Teach Yourself HTML, CSS and JavaScript All In One. Save the file using the name Week4ValidationExample.html. Test your code and debug as necessary.

Change the name of the display() function to myDisplay() where my is your first name. For example, if your first name were Sam, your display function would be SamDisplay(). Test your code and debug as necessary.

Change the width and height of the pop-up window in which you have set the feedback to appear as 250 and 400, respectively. Test your code and debug as necessary.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Form Display Example</title>
   <script type="text/javascript">
   function display() {
   dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')
  
   message = "<ul><li>NAME:" + document.form1.name.value;
   message += "<li>ADDRESS:" + document.form1.address.value;
   message += "<li>PHONE:" + document.form1.phone.value;
   message += "</ul>";
   dispWin.document.write(message);
}
</script>
</head>
<body>
   <h1>Form Display Example</h1>
   <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>
   <form name="form1" method="get" action="">
   <p>NAME: <input type="text" name="name" size="50" /></p>
   <p>ADDRESS: <input type="text" name="address" size="50" /></p>
   <p>PHONE: <input type="text" name="phone" size="50" /></p>
   <p><input type="button" value="Display" onclick="display();" /></p>
   </form>
</body>
</html>

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "Week4ValidationExample.html" is created, which contains following code.

Week4ValidationExample.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Form Display Example</title>

<!-- <script> is used for javascript -->

<script type="text/javascript">

//function

function ViratDisplay() {

dispWin = window.open('','NewWin','toolbar=no,status=no,width=250,height=400')

message = "<ul><li>NAME:" + document.form1.name.value;

message += "<li>ADDRESS:" + document.form1.address.value;

message += "<li>PHONE:" + document.form1.phone.value;

message += "</ul>";

dispWin.document.write(message);

}

</script>

</head>

<body>

<h1>Form Display Example</h1>

<p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>

<form name="form1" method="get" action="">

<p>NAME: <input type="text" name="name" size="50" /></p>

<p>ADDRESS: <input type="text" name="address" size="50" /></p>

<p>PHONE: <input type="text" name="phone" size="50" /></p>

<p><input type="button" value="Display" onclick="ViratDisplay();" /></p>

</form>

</body>

</html>

======================================================

Output : Open web page Week4ValidationExample.html in the browser and will get the screen as shown below

Screen 1 :Week4ValidationExample.html

Screen 2 :Screen showing pop up window

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
I am trying to make a contact form to give input on another browser window. I...
I am trying to make a contact form to give input on another browser window. I am only getting the php code. I am trying to figure out why it won't post. Her is my html and php files: <!DOCTYPE html> <html> <head> <title>Contact</title> <link rel="stylesheet" href="main.css"> </head> <body>    <h1>Contact Form</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="page2.html">My PodCast</a></li> <li><a href="page3.html">Contact Me</a></li> <li><a href="page4.html">Resources</a></li> <li><a href="addressbook.html">Address Book</a></li> <li>Contact Form</li> </ul> </nav> <center><h2>Please fill out form</h2> <div id='container'> <div id='header'></div> <center><h3>Contact</h3>...
PART B- Javascript Using a text editor (VS Code or Notepad) and a web browser, you...
PART B- Javascript Using a text editor (VS Code or Notepad) and a web browser, you will demonstrate how to create an HTML file, externally link a JavaScript file, and write some source code in the JavaScript file. a..Create two blank files to be an HTML file and a JavaScript file. The file names should be partA.html and partA.js. b.. Create a basic HTML webpage structure. c..Link the JavaScript file to the HTML file using the <script> tag. d.. Prompt...
In the previous assessment, you used a static set of named variables to store the data...
In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will...
For this assignment you'll be creating an application that has the user input a subtotal, tax...
For this assignment you'll be creating an application that has the user input a subtotal, tax rate and tip percentage and then displays the sales tax, tip amount and the total. You'll use JQuery instead of the getElementByX functions AND you will display all messages on the page (no alert or prompt boxes) The starter file is based off of the Lab 2 sales_tax application. Feel free to borrow code from your lab solution but realize you will need to...
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>         
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>                   <script src="code.js"></script>   </head>      <body onload="setFocus();">     <div class="container">                                       <div class="main">                                                                                <form action="#" method="post" name="form_name" id="form_id" class="form_class" >                                                                           <h2>--Principal Loan Form--</h2>                                                                                                                                                      <h5>Disclaimer: This software by no mean will precisely predict your mortgage through your lender company.  This Software will only assume the four items below in order to make an educated guess or prediction to your exact mortgage interests amount and the duration of your loan from your lender. <img...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if input from user is empty -> get an error string variable if input is not empty -> use preg_match() to match the pattern $pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/"; -> if it's a matched, get a success string variable */           } ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link...
Part 1: Create the grid tic-tac-toe gameboard using buttons and iteration. Part 2: Human user gets...
Part 1: Create the grid tic-tac-toe gameboard using buttons and iteration. Part 2: Human user gets to select an open cell on the grid - place an X on that button selected Part 3: Check for a win using DOM iteration - new game option if row or column matching X pattern Part 4: Computer gets to select an open cell on the grid - place an O on that button selected Part 5: Check for a win using DOM...
For this assignment, create an html page that has a login form. The form should have...
For this assignment, create an html page that has a login form. The form should have 3 input elements -- 1. This should have a type text for the user to enter UserName 2. This should have a type password (like text except cannot see the text that is typed in), for the user to enter password. 3. Submit button (type submit, as we did in class on 2/6). The form method should be set to POST and the action...
You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page...
You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page should provide a user an interface to add and remove a task as well as mark a task as completed. For this version of the assignment, the tasks will be added directly in the HTML page by manipulating the DOM. Moreover, you should maintain an array that stores task details. Each task comprise of three fields: task-title: which is a one-line description of the...
8- Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following...
8- Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage <h1>…</h1> , <h3>… </h3> , <h6>… </h6> , <p>…</p> , <b> …</b> , <i>…</ i>, <a…..> </a>, <img…..> , <table>….</table> , <div> …</div>, <form>…</ form>, <input type=“text”>, and <input type=“submit”> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT