Web Forms 2.0 - initializing 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">
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>

Product Name	Quantity	Price Per Unit