Question

In: Computer Science

<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...

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

Above is the code from the text and below is the edits that I am having trouble adding to the assisnment.

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.

Solutions

Expert Solution

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Display Example</title>
<script type="text/javascript">
function SamDisplay() {
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="SamDisplay();" /></p>
</form>
</body>
</html>

Please let me know if you have any doubt or modify the answer, Thanks :)

venereology answered 2 weeks ago
Next > < Previous

Related Solutions

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
Can someone verify why my code isnt running <!DOCTYPE html> <html> <body bgcolor=aqua text=purple> <script type="text/javascript">...
Can someone verify why my code isnt running <!DOCTYPE html> <html> <body bgcolor=aqua text=purple> <script type="text/javascript"> funtion oldMacVerse(animal, sound) //Assumes: animal is the name of an animal, sound is the sound it makes //Results: displays a version of the song "Old MacDonals Had a Farm" in outputDiv { document.getElementById('outputDiv').innerHTML =    '<p>Old MacDonald had a farm, E-I-E-I-O.<br>' +    'And on that farm he had a ' + animal + ', E-I-E-I-O.<br>' +    'With a ' + sound +...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="app-wrap"> <header> <input type="text" autocomplete="on" class="search-box" placeholder="Enter your location..." /> </header> <main> <section class= "location"> <div class="city">Hyderabad, IN</div> <div class="date">Thursday 23 July 2020</div> </section> <div class="current"> <div class="temp">25<span>°c</span></div> <div class="weather">Rainy</div> <div class="hi-low">20°c / 23°c</div> </div> </main> </div> <script src="main.js"></script> </body> </html> MAIN.js const api = { key="091ff564240e0e16c46ae680b188ca3e" base: "https://api.openweathermap.org/data/2.5" }; const searchbox = document.querySelector(".search-box"); searchbox.addEventListener("keypress", setQuery); function setQuery(evt) {...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image Swap Application</title> <link rel="stylesheet" type="text/css" href="image_swap.css"> <script type="text/javascript" src="image_swap.js"></script> </head> <body>     <main>         <h1>Fishing Images</h1>         <p>Click on an image to enlarge.</p>         <ul id="imageLinks">             <li><a href="images/release.jpg" title="Catch and Release">                 <img src="thumbnails/release.jpg" alt=""></a></li>             <li><a href="images/deer.jpg" title="Deer at Play">                 <img src="thumbnails/deer.jpg" alt=""></a></li>             <li><a href="images/hero.jpg" title="The Big One!">                 <img src="thumbnails/hero.jpg" alt=""></a></li>             <li><a href="images/bison.jpg" title="Grazing Bison">                 <img src="thumbnails/bison.jpg"...
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">    &n
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">     <script src="clock.js"></script> </head> <body>     <main>         <h1>Digital clock</h1>         <fieldset>             <legend>Clock</legend>             <span id="hours">&nbsp;</span>:             <span id="minutes">&nbsp;</span>:             <span id="seconds">&nbsp;</span>&nbsp;             <span id="ampm">&nbsp;</span>         </fieldset>     </main> </body> </html> CSS: body {     font-family: Arial, Helvetica, sans-serif;     background-color: white;     margin: 0 auto;     width: 450px;     border: 3px solid blue;     padding: 0 2em 1em; } h1 {     color: blue; } label {     float: left;     width: 11em;     text-align: right;     padding-bottom: .5em; } input {     margin-left: 1em;     margin-bottom: .5em; } fieldset {...
HTML document containing a form. The title bar should display “Voting Form”. The form should contain...
HTML document containing a form. The title bar should display “Voting Form”. The form should contain the following: Text boxes to accept the person’s name and e-mail address At least five radio buttons the user can use to vote for a candidate for some office. (You make up some names) Text box for write-in alternative Checkboxes with name and value attributes for these options: oThis is the first time I have voted online. o I have periodically voted online. o...
BEFORE html <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>  
BEFORE html <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above"> I'm a paragraph; what color am I? </p>      <p>     I'm another paragraph, what color am I ?      </p>    <ol>      <li id = "fix1"> I'm another list item;what...
<script type = "text/javascript">     var  first_number = prompt("Please enter the first number for our sequence calculation");     var  second_number...
<script type = "text/javascript">     var  first_number = prompt("Please enter the first number for our sequence calculation");     var  second_number = prompt("Please enter the second number for our sequence calculation");     first_number = parseInt(first_number);     second_number = parseInt(second_number);     console.log(first_number);     console.log(second_number);     var previous_number = first_number;     var next_number = second_number;     var count = 10;     while(count>0)     {         count = count - 1;         var new_number = previous_number + next_number;         previous_number = next_number;         next_number = new_number;         console.log(next_number)     } I need to use the fib function to print the same number sequence...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT