Question

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 got through this part fine, and loaded the XSL into the HTML DOM using JavaScript. Now I’m stuck trying to figure out how I will process the data. I need to multiply the quantity (which is inputted by the user), and the price (which is inputted from the XML).

I am completely stuck and would greatly appreciate any hints on where to go from here.

My XSLT:

<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>

Some XML:

<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>

Answer 1

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.

If you can use a javascript library (e.g. jQuery) this task is considerably simpler, but you can certainly do this without it.

Your calculate function should:

1. store the quantity and convert to a number. The input element with the quantity will have triggered the event.
2. find the row that triggered the event by walking up the parent nodes.
3. find the price on that row by walking back down. Convert to a number.
4. 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.