Question

Add comments to it by filling in the blank comments numbers 1 through 32. (The first...

Add comments to it by filling in the blank comments numbers 1 through 32. (The first few comments are HTML comments, not JavaScript comments, and are bracketed according to <!- this is an HTML comment>.)


<!DOCTYPE html>
<html>
<body onload="handleFormAction()">


<h2>Form handling example in JavaScript</h2>
<h3>(Or, John Doe meets Robbie Robot)</h3>
<h4>Instructions: Fill in the form. Then fill in comments 1 through 23 in the JavaScript code!</h4>


<form target="_blank" action= > <!- 1: replace this placeholder HTML comment with a real comment>
Type your first name:
<br> <!- 2: replace this placeholder HTML comment with a real comment>
<input type="text" name="firstName" value="John"> <!- 3: replace this placeholder HTML comment with a real comment>
<br>
...and last name:
<br>
<input type="text" name="lastName" value="Doe">
<br>
<input type="submit" value="Click to submit form"> <!- 4: replace this placeholder HTML comment with a real comment>
</form>
<br><br>

<p id="demo"> <!- 5: replace this placeholder HTML comment with a real comment>
<b>The analysis of the form data will appear here:</b>
</p>

<script>
//6
function handleFormAction(){
//7
if (window.location.href.indexOf("?")>-1)
//8
processFormData();
}
//9
function processFormData(){
//10
var fullURLstring=window.location.href;
//11
document.getElementById('demo').innerHTML
+= "<br>fullURLstring is: "+fullURLstring;
//12
var separate_argsPassedIn=fullURLstring.split("?");
//13
document.getElementById('demo').innerHTML
+= "<br>fullURLstring is: "+ separate_argsPassedIn;
//14
document.getElementById('demo').innerHTML
+= "<br>Notice '?' is removed and parts are now separated by a comma";
//15
var tempArray=['a','b','c','d','e'];
//16
document.getElementById('demo').innerHTML
+= "<br>array ['a','b','c','d','e'] prints out as: "
+ tempArray;
//17
document.getElementById('demo').innerHTML
+= "<br>That should remind you what .split() returns.";
//18
var argsPassedIn=separate_argsPassedIn[1];
//19
document.getElementById('demo').innerHTML
+= "<br>"+argsPassedIn;
//20
var arrayOfArgs=argsPassedIn.split("&");
//21
document.getElementById('demo').innerHTML
+= "<br>"+arrayOfArgs;
//22
var arg1=arrayOfArgs[0];
//23
var arg2=arrayOfArgs[1];
//24
document.getElementById('demo').innerHTML
+= "<br>"+arg1;
//25
document.getElementById('demo').innerHTML
+= "<br>"+arg2;
//26
var separate_firstName = arg1.split("=");
//27
var separate_lastName = arg2.split("=");
//28
var firstName=separate_firstName[1];
//29
var lastName =separate_lastName [1];
//30
document.getElementById('demo').innerHTML
+= "<br>"+firstName;
//31
document.getElementById('demo').innerHTML
+= "<br>"+lastName;
//32
document.getElementById('demo').innerHTML
+= "<br>Good afternoon, "+lastName+". I am Robot, but please call me Robbie. May I call you "+firstName+"?";
}
</script>

</body>
</html>

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Each line number refers to each comment:

  1. Open form in new Tab.
  2. Break to next line.
  3. Take name input as text.
  4. Submit the form.
  5. provide unique id = "demo" to paragraph tag.
  6. ** Javascript for Form Handling **
  7. Checks for a valid get request
  8. Calls processFormData function
  9. Define ProcessFormData function
  10. Get window url.
  11. adds window url to the p tag w
  12. Splits the string on "?" to obtain GET params
  13. adds request param to p tag
  14. add string to p tag
  15. initialize array
  16. append array as html in p tag
  17. appends line break and string to p tag
  18. get the first argument for list
  19. append argument 1 to p tag
  20. creates array of passed in argument split at "&"
  21. append the created array to p tag
  22. get first element from arrayOfArgs
  23. get second element from arrayOfArgs
  24. append arg1 to p tag
  25. append arg2 to p tag
  26. split arg1 at "=" to get form input value
  27. split arg2 at "="
  28. get first_name from splited array
  29. get last name from splited array
  30. append first name to p tag
  31. append last name to p tag
  32. append string to p tag with last name and first name included

Hope this helps!

Add a comment
Know the answer?
Add Answer to:
Add comments to it by filling in the blank comments numbers 1 through 32. (The first...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • I need HELP to get the code to do these function: If I keep clicking "Generate"...

    I need HELP to get the code to do these function: If I keep clicking "Generate" multiple times, the list keeps on getting bigger. The number of rows should always be equal to the number of columns. Also make the code to show both table at the same time? Here is the code I got some far : Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Testing</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <style> td...

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT