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

Answers


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.


Need Your Help

Search file content on iphone

iphone search

Is there an Iphone SDK API to search resource files?

Background color/image of div expand the whole page, but content stays in wrapper

html css

This seems so trivial, but how do I make the background color or image of a div span the whole window, but keep the content in a wrapper or set width? Almost like a footer, or nav.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.