XML - Creating an order form
I have a homework assignment that asks to create an order form. The order form is supposed to include a list of items available for the user to purchase, which comes from an XML document and is styled with an XSL file.
I am completely stuck and would greatly appreciate any hints on where to go from here.
<table width="0" border="1" cellspacing="3" cellpadding="5"> <tr> <td>Qty</td> <td>Item Description</td> <td>Price</td> </tr> <xsl:for-each select="//item"> <tr> <td><input name="top" type="text" onchange="calculate()" value="0" size="4" /></td> <td>Item <xsl:value-of select="id"/></td> <td><xsl:value-of select="price"/></td> </tr> </xsl:for-each> </table>
<productcatalog> <item> <id>001</id> <name>Item #1</name> <price>10</price> </item> <item> <id>002</id> <name>Item #2</name> <price>20</price> </item> <item> <id>003</id> <name>Item #3</name> <price>30</price> </item> <item> <id>004</id> <name>Item #4</name> <price>40</price> </item> </productcatalog>
Since the quantity is from the user you can't implement this with XSL. Your XSL stylesheet should output a script which does the calculation.
Your calculate function should:
- store the quantity and convert to a number. The input element with the quantity will have triggered the event.
- find the row that triggered the event by walking up the parent nodes.
- find the price on that row by walking back down. Convert to a number.
- multiply price by quantity and insert as a string into the proper TD. (you use textContent or innerText attribute)
Storing the price may be an issue. The new way (inaugurated with HTML5) is to use an attribute with a data- prefix. You can add data-price to the html output as a handy place to get the price. You can even put this on the input node itself, so you don't have to navigate nodes to find the price.