This is part of a suite of test forms for Web Forms 2.0 for a set of shared examples with XForms Transitional. See the corresponding XForms Transitional example. This demo will only work on a Web Forms 2.0 compliant browser (e.g. Opera 9). The step attribute is used on the price per unit field to ensure that non-integral numbers are treated as being valid.
Here is the markup for the above form:
<script type="text/javascript"> window.onload = init; function init() { var out = document.getElementById("out"); out.value = total(); } var productPrice = {"hammer":7.99, "screwdriver":6.99, "spanner":5.99, "saw":20.99, "drill":25.99}; function setprice(select) { var tr = select.parentNode.parentNode; var fields = tr.getElementsByTagName("INPUT"); fields[1].value = price(select.value); } // invoked by onforminput on output element // works around row dependent field names function total() { var rows = document.getElementById("items").rows; var result = 0; for (var i = 0; i < rows.length - 1; ++i) { var fields = rows[i].getElementsByTagName("INPUT"); var qty = fields[0].value; var price = fields[1].value; result += qty * price; } return "$" + result; } </script> <form name="form1" onsubmit="false"> <fieldset name="lineItem"> <legend>Repeating groups of fields</legend> <table> <thead> <tr> <td>Product Name</td> <td>Quantity</td> <td>Price Per Unit</td> </tr> </thead> <tbody id="items"> <tr id="item" repeat="template" repeat-start="4"> <td><select name="row[line]_item" onchange="setprice(this)"> <option></option> <option value="hammer">Hammer</option> <option value="screwdriver">Screwdriver</option> <option value="spanner">Spanner</option> <option value="saw">Saw</option> <option value="drill">Electric Drill</option> </select> </td> <td><input name="row[line]_quantity" type="number" min="0" title="number purchased" /></td> <td><input name="row[line]_unitprice" type="number" step="0.01" title="price per unit" /></td> </tr> </tbody> </table> </fieldset> <p>Total price: <output id="out" onforminput="value = total()">0</output></p> <button type="submit">Submit</button> <button type="add" template="item">Add Row</button> <button type="reset">Reset</button></p> </form>
By way of contrast the XForms Transitional markup for this example is the following:
<script type="text/javascript"> var productPrice = {"hammer":7.99, "screwdriver":6.99, "spanner":5.99, "saw":20.99, "drill":25.99}; </script> <form name="form1"> <fieldset name="lineItem" repeat-number="4"> <legend>Repeating groups of fields</legend> <label for="item">Product Name</label> <label for="quantity">Number Purchased</label> <label for="unitprice">Price Per Unit</label> <select name="item"> <option></option> <option value="hammer">Hammer</option> <option value="screwdriver">Screwdriver</option> <option value="spanner">Spanner</option> </select> <input name="quantity" type="number" min="0" title="number purchased"/> <input name="unitprice" type="number" step="0.01" title="price per unit" calculate="productPrice[item]" readonly="readonly"/> </fieldset> <p><label for="total">Total price</label> <input name="total" readonly="readonly" calculate="sumover(lineItem, quantity*unitprice)"/> <button type="submit">Submit</button> <button type="reset">Reset</button></p> </form>Dave Raggett <dsr@w3.org>
Copyright © 2007 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.