Web Forms 2.0 - repeating fieldsets

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">
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 id="line" repeat="template" repeat-start="4">
<td><input name="row[line]_item" type="text"
 title="product name"/></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 onforminput="value = total()">0</output></p>

<button type="submit">Submit</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">Quantity</label>
<label for="unitprice">Price Per Unit</label>
<input name="item" type="text" title="product name"/>
<input name="quantity" type="number" title="number purchased"/>
<input name="unitprice" type="number" title="price per unit"/>
</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>

Product Name	Quantity	Price Per Unit