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).
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(); } // 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[1].value; var price = fields[2].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 repeat="1"> <td><input name="row1_item" type="text" title="product name" value="a"/></td> <td><input name="row1_quantity" type="number" title="number purchased" value="1"/></td> <td><input name="row1_unitprice" type="number" title="price per unit" value="10"/></td> </tr> <tr repeat="2""> <td><input name="row2_item" type="text" title="product name" value="b"/></td> <td><input name="row2_quantity" type="number" title="number purchased" value="2"/></td> <td><input name="row2_unitprice" type="number" title="price per unit" value="3"/></td> </tr> <tr id="item" repeat="template" repeat-start="2"> <td><input name="row[line]_item" type="text" title="product name"/></td> <td><input name="row[line]_quantity" type="number" title="number purchased" /></td> <td><input name="row[line]_unitprice" type="number" 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:
<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> <!-- first row --> <input name="item" datatype="text" title="product name" value="a"/> <input name="quantity" datatype="number" title="number purchased" value="10"/> <input name="unitprice" datatype="number" title="price per unit" value="1"/> <!-- second row --> <input name="item" datatype="text" title="product name" value="b"/> <input name="quantity" datatype="number" title="number purchased" value="2"/> <input name="unitprice" datatype="number" title="price per unit" value="3"/> <!-- any remaining rows will be generated dynamically so that there is always at least the number of rows given by repeat-number --> </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.