I have to modify this Ajax code to have it provide the addresses of repeat custo
ID: 3738757 • Letter: I
Question
I have to modify this Ajax code to have it provide the addresses of repeat customers using both names and addresses as the hash. I have the HTML, and JS and PHP code
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>
<meta charset = "utf-8" />
<style type = "text/css"> input.name {position: absolute; left: 120px;}
input.address {position: absolute; left: 120px;}
input.zip {position: absolute; left: 120px;}
input.city {position: absolute; left: 120px;}
input.state {position: absolute; left: 120px;}
img {position: absolute; left: 400px; top: 50px;}
</style> <script type = "text/JavaScript" src="popcornA.js"> </script>
</head>
<body>
<h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
<form action = "">
<p> Buyer's Name:<input class = "name" type = "text" name = "name" size = "30" /> </p>
<p>Street Address:<input class = "address" type = "text" name = "street" size = "30" /> </p>
<p>Zip code:<input class = "zip" type = "text" name = "zip" size = "10" /> </p>
<p>City:<input class = "city" type = "text" name = "city" id = "city" size = "30" /> </p>
<p>State:<input class = "state" type = "text" name = "state" id = "state" size = "30" /> </p>
<img src="../images/popcorn.png" alt = "picture of popcorn"width = "150" height = "150"/>
<!-- The submit and reset buttons -->
<p><input type = "submit" value = "Submit Order" /><input type = "reset" value = "Clear Order Form" /> </p></form>
</body>
</html>
JS.
// 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 into the document
function getPlace(zip) { var xhr = new XMLHttpRequest();
// Register the embedded receiver function as the handler
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);
}
<?php
// getCityState.php
// Gets the form value from the "zip" widget, looks up the
// city and state for that zip code, and prints it for the
// form
$cityState = array("81611" => "Aspen,Colorado",
"81411" => "Bedrock, Colorado",
"80908" => "Black Forest, Colorado",
"80301" => "Boulder, Colorado",
"81127" => "Chimney Rock, Colorado",
"80901" => "Colorado Springs, Colorado",
"81223" => "Cotopaxi, Colorado",
"80201" => "Denver, Colorado",
"81657" => "Vail, Colorado",
"80435" => "Keystone, Colorado",
"80536" => "Virginia Dale, Colorado",
header("Content-Type: text/plain");
$zip = $_GET["zip"];
if (array_key_exists($zip, $cityState))
print $cityState[$zip];
else
print " , ";
?>
FUCTION.
// 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
function getPlace(zip)
{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = receivePlace;
xhr.open("GET", "getCityState.php?zip=" + zip, true); xhr.send(null); }
Explanation / Answer
Note: Put all files in one folder & then run it.
Explaination: I didn't understand what you actually needed. So for now, Your code was having some error's in it. So I removed those errors & now code is up & running.
Comments added where i found the errors. See those down below.
If you need anything more on it. Add comment in comment section below.
-------------------------------------------------------HTML File ----------------------------------------------------------------------
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Popcorn Sales Form (Ajax) </title>
<meta charset = "utf-8" />
<style type = "text/css">
input.name {position: absolute; left: 120px;}
input.address {position: absolute; left: 120px;}
input.zip {position: absolute; left: 120px;}
input.city {position: absolute; left: 120px;}
input.state {position: absolute; left: 120px;}
img {position: absolute; left: 400px; top: 50px;}
</style><script type = "text/JavaScript" src="popcornA.js"> </script>
</head>
<body>
<h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
<form action = "">
<p> Buyer's Name:<input class = "name" type = "text" name = "name" size = "30" /> </p>
<p>Street Address:<input id="address" class = "address" type = "text" name = "street" size = "30" /> </p>
<p>Zip code:<input class = "zip" type = "text" name = "zip" size = "10" /> </p>
<p>City:<input class = "city" type = "text" name = "city" id = "city" size = "30" /> </p>
<p>State:<input class = "state" type = "text" name = "state" id = "state" size = "30" /> </p>
<img src="../images/popcorn.png" alt = "picture of popcorn"width = "150" height = "150"/>
<p><input type = "submit" value = "Submit Order" /><input type = "reset" value = "Clear Order Form" /> </p>
</form>
</body>
</html>
--------------------------------------------------------------popcornA.js------------------------------------------------------------------------
function getAddress(name){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200)
{
var result = xhr.responseText;
document.getElementById("address").value = '';
if (document.getElementById("address").value == "")
document.getElementById("address").value = result;
}
}
xhr.open("GET", "getNameAddress.php?name=" + name);
xhr.send(null);
}
function getPlace(zip) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200)
{
var result = xhr.responseText;
var place = result.split(', ');
document.getElementById("city").value = '';
document.getElementById("state").value = '';
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); // Here you were added a extra space after =
xhr.send(null);
}
-------------------------------------------------------------getCityState.php File-----------------------------------------------------------
<?php
// getCityState.php
// Gets the form value from the "zip" widget, looks up the
// city and state for that zip code, and prints it for the
// form
$cityState = array("81611" => "Aspen,Colorado",
"81411" => "Bedrock, Colorado",
"80908" => "Black Forest, Colorado",
"80301" => "Boulder, Colorado",
"81127" => "Chimney Rock, Colorado",
"80901" => "Colorado Springs, Colorado",
"81223" => "Cotopaxi, Colorado",
"80201" => "Denver, Colorado",
"81657" => "Vail, Colorado",
"80435" => "Keystone, Colorado",
"80536" => "Virginia Dale, Colorado"); // here you were forgot to close the array & semicolon
header("Content-Type: text/plain");
$zip = $_GET["zip"];
if (array_key_exists($zip, $cityState))
print $cityState[$zip];
else
print " , ";
?>
---------------------------------------------------------------------getNameAddress.php--------------------------------------------
<?php
$nameAdress = array("john" => "Baker street, USA",
"nick" => "Orlando, USA",
"patrick" => "Washington, USA",
"kim" => "Virginia Dale, Colorado");
header("Content-Type: text/plain");
$name = strtolower($_GET["name"]);
if (array_key_exists($name, $nameAdress))
print $nameAdress[$name];
else
print "";
?>