Web Forms 2.0 - referring to fields within 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">
// form.name doesn't work for fieldsets in Opera
function fieldset(name)
{
  var fsets = document.getElementsByTagName("FIELDSET");

  for (var i = 0; i < fsets.length; ++i)
  {
    if (fsets[i].getAttribute("name") == name)
      return fsets[i];
  }

  return null;
}

// calculate="difship ? shipto.city : billto.city"
function update()
{
  var form = document.forms[0];
  var shipto = fieldset("shipto");

  if (form.difship.checked)
  {
    form.shipCity.value = form.city[1].value; 
    shipto.style.display = "block";
    shipto.style.visibility = "visible";
  }
  else
  {
    form.shipCity.value = form.city[0].value;
    shipto.style.display = "none";
    shipto.style.visibility = "hidden";
  }
}

window.onload = update;
</script>

<form name="form1" onforminput="update()">
<fieldset class="address" name="billto">
<legend>Billing Address</legend>
<label for="f1">Street</label>
<input id="f1" name="street" value="1280 Buena Vista">
<br>
<label for="f2">City</label>
<input id="f2" name="city" value="Palo Alto">
<br>
<label for="f3">State</label>
<input id="f3" name="state" value="California">
<br>
<label for="f4">Zip code</label>
<input id="f4" name="zipcode">
<br>
</fieldset>

<p><input id="f5" name="difship" type="checkbox" value="needed"/>
<label for="f5">Ship to a different address</label>
<br clear="all"/></p>

<fieldset class="address" name="shipto" relevant="difship">
<legend>Shipping Address</legend>
<label for="f6">Street</label>
<input id="f6" name="street" value="46 Main Street"/>
<br>
<label for="f7">City</label>
<input id="f7" name="city" value="Redwood City"/>
<br>
<label for="f8">State</label>
<input id="f8" name="state" value="California"/>
<br>
<label for="f9">Zip code</label>
<input id="f9" name="zipcode"/>
<br>
</fieldset>

<p><label for="f10">Will be shipped to</label>
<input id="f10" name="shipCity" readonly="readonly"></p>
</form>

By way of contrast the XForms Transitional markup for this example is the following:

The XForms Transitional markup for this example is the same except for the deletion of the script element and the onforminput attribute on the form element, and the addition of the relevant attribute on the second fieldset and the calculate attribute on the "shipCity" input element:

...
<fieldset class="address" name="shipto" relevant="difship">
...
</fieldset>

<p><label for="f10">Will be shipped to</label>
<input id="f10" name="shipCity" readonly="readonly"
 calculate="difship ? shipto.city : billto.city"/></p>
</form>

Dave Raggett <dsr@w3.org>