For this Assignment, 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):
onkeyup=“handleInput(this.value)”
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.
Here is my page:
<!DOCTYPE html>
<!–– Catalog_Page.html
Catalogue of Motorcycle Equipment
––>
<html lang = “en”>
<head>
<title> Motorcycle Equipment </title>
<meta charset = “utf-8” />
<link rel=”stylesheet” href=”style.css” class =”description”>
</head>
<head>
<p>
<th> <h3>If you love to ride a Ducati then enter your information. <h3><th>
<p>
<p>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname”>
<p>
<p>
<input type = “submit” value = “Submit Order” />
<input type = “reset” value = “Clear Order Form” />
</p>
</head>
<body>
<Form>
<table border=”7″>
<caption> <h3>Motorcycle Equipment<h3> </caption>
<tr>
<th> Select </th>
<th> Item </th>
<th> Picture </th>
<th class = “description”> Description </th>
<th> Price </th>
</tr>
<tr>
<td>
<input type=”radio” name=”info” value=”65.00″ checked>Buy<br>
</td>
<td> Ducati Gloves </td>
<td> <img src = “Ducati_Gloves.jpg” width=”100″ height=”80″ </td>
<td> Super cool Ducati gloves protect your hands </td>
<td> $65.00 </td>
</tr>
<tr>
<td>
<input type=”radio” name=”info” value=”150.00″ checked>Buy<br>
</td>
<td> Ducati Shoes </td>
<td> <img src = “Ducati_Shoes.jpg” width=”100″ height=”80″ </td>
<td> Super cool Ducati shoes that stick to the peg </td>
<td> $150.00 </td>
</tr>
<tr>
<td>
<input type=”radio” name=”info” value=”800.00″ checked>Buy<br>
</td>
<td> Ducati Helmet </td>
<td> <img src = “Ducati_Helmet.jpg” width=”100″ height=”80″ </td>
<td> Super cool Ducati Helmet to keep your bean safe </td>
<td> $800.00 </td>
</tr>
<tr>
<td>
<input type=”radio” name=”info” value=”350.00″ checked>Buy<br>
</td>
<td> Ducati Jacket </td>
<td> <img src = “Ducati_Jacket.jpg” width=”100″ height=”80″ </td>
<td> Super cool Ducati jacket to keep you warm </td>
<td> $350.00 </td>
</tr>
</table>
<Form>
<p>
Ducati Home Page <br />
<a href = “Home_Page.html”> Ducati Home Page </a>
<p>
</body>
</html>
0 comments