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 8 months ago
Next > < Previous

Related Solutions

<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = new Date(2020, 12, 29);           // HINT: Be careful with getMonth()           var d =  a.getFullYear() + a.getMonth();           var sum = d % 5;           document.getElementById("ans").innerHTML = sum.toString();         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <input type="button" name="Submit" id="submit" value="Submit" onclick="findAnswer();"/>          </form>     <p id ="ans"></p>   </body> </html> none Will the code from above print anything, if so, what printed ?...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = document.getElementById("box1").value;           var b = document.getElementById("box2").value;                        if (typeof(a) == "number" && typeof(b) == "number") {               var c = (a + b) % 5;               document.getElementById("ans").innerHTML = c.toString();             } else {                document.getElementById("ans").innerHTML = "no Good";             }         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <label>Enter Numbers: </label> <br />           <label> Value 1  : </label><input type="text" name="box1" id="box1"  value="10" /><br/>           <label> Value...
<!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...
Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form>...
Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form> <table style="color:white;background-color:blue;border:solid black 7px;border-radius:25px;"> <tr><th colspan="2" style="color:white;background-color:black;border:solid black 2px;outline:solid black 2px;">SQUARE PROBLEM</th></tr> <tr> <td><label>Enter side:</label></td><td> <input type="text" style="background-color:#DEDEE6;border:4px solid red;"/> </td> </tr> <tr> <td><label>Area:</label></td><td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr> <td><label>Perimeter:</label></td>   <td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr>    <td colspan="2" >    <center>    <input type="button" value="Area" style="color:white;background-color:black;border:1px solid red;"/>    <input type="button" value="Perimeter" style="color:white;background-color:black;border:1px solid white;"/>...
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 {...
Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-
Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-align: center;     }     .textdiv {        background-color: LightSlateGrey;        width: 50%;     }     .imgdiv {                      background-color: PapayaWhip;                   width: 30%;     } </style> </head> <body>     <h2>Center Me</h2>     <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>     <div class="textdiv">                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT