For this Application, create an alternative version of your \"catalog\" ordering

ID: 3740443 • Letter: F

Question

For this Application, create an alternative version of your "catalog" ordering page. Replace the table that lists all of the available items with a text box where the user can type in an item's name. Use Ajax to display complete item names as the user types. First, create a copy of your catalog page. Replace the table with a text box that will accept an item name. Include an attribute that will call a handler function like this (assuming that you named the handler function handleInput): This will pass the content of the text box to the handler function every time the user finishes typing a character. Also add an empty paragraph that you will fill in with the item description. Include an id="description" attribute so that your JavaScript can locate the paragraph. Keep the rest of the page content unchanged. Next, create the handler function. Unless the parameter contains an empty string, create an XMLHttpRequest object named xhr, Include cross-browser support in your code. Include code to register and specify a receiver function. For now, simply store the xhr.responsetext in the innerHTML attribute of the description paragraph. Decide a name for your PHP response document and add open and send calls. Remember to include the item string as a parameter in the URL. Create the response document so that it recognizes item names and returns their descriptions. Notice that the code shows a description only when the user completes the item name. Use this fact to give the order button a visibility style of hidden unless the user has entered a valid product name. Modify your validation code correspondingly. Explain how you could modify the response document so that it will match partial item names. Ensure that your websites comply with the accessibility and usability standards discussed in this week’s resources. Submit your pages to the W3C validator (http://validator.w3.org/) and correct all errors. (Note: You may ignore an error concerning placement of the script element.) Include screenshots of the results in your submission. Also include the full XHTML code for each page, and screenshots of the pages as your Web browser displays them. Summarize the steps you followed to create and perfect the Web site. Outline the difficulties you encountered and how you resolved them. Details

Explanation / Answer

CODE:

//Hope the below code helps.

GetMemorabiliaDat

<?php

// getMemorabiliaData.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

$Memorabilia_N_Price = array("mini" => "1 Mini_Helmet $169.99",

"Pro Line" => "2 Pro_Line_Helmet $499.99",

"Portrait" => "3 Portrait_Card $349.99",

"Photograph" => "4 Photograph $99.99"

"Football" => "5 Football $1629.99"

);

$helmet = $_GET["item"];

if (array_key_exists($helmet, $Memorabilia_N_Price))

print $Memorabilia_N_Price[$helmet];

else

print " ";

Memorabilia_Final

<?php echo '<?xml version="1.0" encoding="IUTF-8"?>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- memorabilia3.html

This describes the memorabilia sales form

-->

<head>

<title> Memorabilia Sales - for PHP handling </title>

</script>

</head>

<body>

<h2> Welcome to Bears and Butterflies Memorabilia Sales </h2>

<table>

<tr>

<td> Buyer's Name: </td>

</td>

</tr>

<tr>

<td> Street Address: </td>

</td>

</tr>

<tr>

<td> City, State, Zip: </td>

</td>

</tr>

</table>

Search for your item -->

<br />

Quantity <input type = "text" name = "qty" id = "qty" size = "5" />

<p />

<h3> Payment Method </h3>

<p>

<input type = "radio" name = "payment" value = "mc" /> Master Card <br />

<input type = "radio" name = "payment" value = "discover" /> Discover <br />

<input type = "radio" name = "payment" value = "check" /> Check <br /> <br />

</p>

</form>

</body>

</html>

Memorabilia_Final JS file

var aCatalog = new Array("minihelmet","prolinehelmet","portraitcard", "photograph", "football");
//var aCatalog = new Array("albert@mail.com","beth@mail.com","harry@mail.com");
aCatalog.sort();
function Complete(object, event) {
// if there is no object or event then end
if ((!object) || (!event) || (aCatalog.length == 0)) {
return;
}

// If the object has no length
if (object.value.length == 0) {
return;
}
// make sure the characters are in the legal ascii range
var aChar = (object.setSelectionRange) ? event.which : event.keyCode;
if ((aChar < 32) || (aChar >= 33 && aChar <= 46) || (aChar >= 112 && aChar <= 123)) {
return;
}
var txt = object.value.replace(/;/gi, ",");
aChar = txt.split(",");
txt = aChar.pop();
txt = txt.replace(/^s*/, "");
if (txt.length == 0) {
return;
}
if (object.createTextRange) {
var rng = document.selection.createRange();
if (rng.parentElement() == object) {
aChar = rng.text;
var ini = object.value.lastIndexOf(aChar);
}
} else if (object.setSelectionRange) {
var ini = object.selectionStart;
}
for (var i = 0; i < aCatalog.length; i++) {
aChar = aCatalog[i].toString();
-5-
if (aChar.toLowerCase().indexOf(txt.toLowerCase()) == 0) {
object.value += aChar.substring(txt.length, aChar.length);
// this calls the getCornData.php
getCornData (object.value);
break;
}
}
if (object.createTextRange) {
rng = object.createTextRange();
rng.moveStart("character", ini);
rng.moveEnd("character", object.value.length);
rng.select();
} else if (object.setSelectionRange) {
object.setSelectionRange(ini, object.value.length);
}
}
function getMemorabiliaData(item) {
var xhr = new XMLHttpRequest();
//alert (item);
// Register the embedded handler function
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
// alert (result);
var place = result.split(" ");
// alert (place[0] + " : " + place[1] + " : " + place[2]);
if (document.getElementById("itemID").value == "")
document.getElementById("itemID").value = place[0];
if (document.getElementById("product").value == "")
document.getElementById("product").value = place[1];
if (document.getElementById("price").value == "")
document.getElementById("price").value = place[2];
}
}
xhr.open("GET", "getMemorabiliaData.php?item=" + item);
xh

Memorabilia3_Final

<?php echo '<?xml version="1.0" encoding="IUTF-8"?>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Memorabilia3.php - Processes the form described in

Memorabilia3.html

-->

<head>

<title> Process the Memorabilia . php form </title>

</head>

<body>

<?php

// Get form data values

$itemID = $_POST["itemID"];

$qty = $_POST["qty"];

$price = $_POST["price"];

$name = $_POST["name"];

$street = $_POST["street"];

$city = $_POST["city"];

$payment = $_POST["payment"];

// If any of the quantities are blank, set them to zero

if ($qty == "") $qty = 0;

if ($itemID == "") $itemID = 0;

if ($price == "") $price = 0;

// Compute the item costs and total cost

$minihelmet = 0;

$prolinehelmet = 0;

$portraitcard = 0;

$photograph = 0;

$football = 0;

$minihelmet_cost = 0;

$prolinehelmet_cost = 0;

$portraitcard_cost = 0;

$photograph_cost = 0;

$football_cost = 0;

$total_price = 0;

switch ($itemID){

case "1": $minihelmet = $qty;

$minihelmet_cost = $qty * 169.99;

$total_price = $minihelmet_cost;

break;

case "2": $prolinehelmet = $qty;

$prolinehelmet_cost = $qty * 499.99;

$total_price = $prolinehelmet_cost;

break;

case "3": $portraitcard = $qty;

$portraitcard_cost = $qty * 349.99;

$total_price = $portraitcard_cost;

break;

case "4": $photograph = $qty;

$photograph_cost = $qty * 99.99;

$total_price = $photograph_cost;

break;

case "5": $football = $qty;

$football_cost = $qty * 1629.99;

$total_price = $football_cost;

break;

}

$total_items = $qty;

// -----------------FILE OUTPUT ---------------------------

// used in file output

$today = date("n/j/Y");

// Create a variable for the file

$myFile = "MemorabiliaSales.dat";

// Open file for Append

$file_var = fopen($myFile, "a+");

// write all data to file

// output custumer name, date, and total price don't forget new line character

$output = "$name; $today; $total_price ";

fwrite($file_var,$output);

// make sure you close the file.

fclose($file_var);

// -----------------FILE OUTPUT ---------------------------

// Return the results to the browser in a table

<h4> Customer: </h4>

<?php

print ("$name <br /> $street <br /> $city <br />");

<caption> Order Information </caption>

<tr>

<th> Product </th>

<th> Unit Price </th>

<th> Quantity Ordered </th>

</tr>

<td> Mini Helmet </td>

</td>

</tr>

<td> Pro Line Helmet </td>

</td>

</tr>

<td> Portrait Card </td>

</td>

</tr>

<td> Photograph </td>

</td>

</tr>

<td> Football </td>

</td>

</tr>

</table>

<?php

print ("You ordered $total_items Memorabilia items <br />");

printf ("Your total bill is: $ %5.2f <br />", $total_price);

print ("Your chosen method of payment is: $payment <br />");

</body>

</html>

Navigate

For this Application Assignment, you will review contract form B201-2007 and ana

For this Application, review the case studys. Consider important client characte

For this Application, create an alternative version of your \"catalog\" ordering

Question

Explanation / Answer

Related Questions

Navigate