View the step-by-step solution to:

I'm supposed to "Modify PopcornA example application to use Dojo" There are two files, one html, one js The HTML: <!DOCTYPE html>...

I'm supposed to "Modify PopcornA example application to use Dojo"

There are two files, one html, one js

The HTML:

<!DOCTYPE html>
<!-- popcornA.html 
   This describes popcorn sales form page which uses
   Ajax and the zip code to fill in the city and state
   of the customer's address
   -->
<html lang = "en">
 <head> <title> Popcorn Sales Form (Ajax) </title>
  <style type = "text/css">
   img {position: absolute; left: 400pxtop: 50px;}
  </style>
  <script type = "text/JavaScript" src = "popcornA.js">
  </script>
  <meta charset = "utf-8" />
 </head>
 <body>
  <h2> Welcome to Millenium Gynmastics Booster Club Popcorn 
     Sales 
  </h2>

  <form action = "">

<!-- A borderless table of text widgets for name and address -->

   <table>
    <tr>
     <td> Buyer's Name: </td>  
     <td> <input type = "text" name = "name" 
           size = "30" />
     </td>
    </tr>
    <tr>
     <td> Street Address: </td>
     <td> <input type = "text" name = "street"  
           size = "30" />
     </td>
    </tr>
    <tr>
     <td> Zip code: </td>
     <td> <input type = "text" name = "zip"
           size = "10"  
           onblur = "getPlace(this.value)" />
     </td>
    </tr>
    <tr>
     <td> City </td>
     <td> <input type = "text" name = "city"  
           id = "city" size = "30" />
     </td>
    </tr>
    <tr>
     <td> State </td>
     <td> <input type = "text" name = "state"  
           id = "state" size = "30" />
     </td>
    </tr>
   </table> 
 
   <img src = "../images/popcorn.png"  
      alt = "picture of popcorn" 
      width = "150" height = "150" />
   <p />
    
<!-- The submit and reset buttons -->

   <p>
    <input type = "submit" value = "Submit Order" />
    <input type = "reset" value = "Clear Order Form" />
   </p>
  </form>
 </body>
</html>

The java script:

// popcornA.js
// Ajax JavaScript code for the popcornA.html document

/********************************************************/
// function getPlace
// parameter: zip code
// action: create the XMLHttpRequest object, register the
//     handler for onreadystatechange, prepare to send
//     the request (with open), and send the request,
//     along with the zip code, to the server
// includes: the anonymous handler for onreadystatechange, 
//      which is the receiver function, which gets the 
//      response text, splits it into city and state,
//      and puts them in the document

function getPlace(zip) {
 var xhr = new XMLHttpRequest();

// Register the embedded handler function
 xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
   var result = xhr.responseText;
   var place = result.split(', ');
   if (document.getElementById("city").value == "")
    document.getElementById("city").value = place[0];
   if (document.getElementById("state").value == "")
    document.getElementById("state").value = place[1];
  }
 }
 xhr.open("GET", "getCityState.php?zip=" + zip);
 xhr.send(null);
}


I don't even know where to begin. Would appreciate some assistance.

Recently Asked Questions

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

-

Educational Resources
  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question