Web Forms 2.0 - relevant fields

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 relevant()
{
  var x = document.getElementById('f1');
  var y = document.getElementById('f2');
  var ylabel = y.labels[0];

  var years = eval(x.value);

  if (!isNaN(years) && years < 4)
  {
    y.style.display = ylabel.style.display = "inline";
    y.style.visibility = ylabel.style.visibility = "visible";

  }
  else
  {
    y.style.display = ylabel.style.display = "none";
    y.style.visibility = ylabel.style.visibility = "hidden";
  }
}

window.onload = relevant;
</script>

<form name="form1" onsubmit="false">
<fieldset>
<legend>Relevant fields</legend>
<label title="try with 5 and then with 3"
for="f1">Number of years at current address?</label>
<input id="f1" name="x" type="number" onforminput="relevant()"/><br/>
<label title="Needed if years at current address is less than 4"
for="f2">Number of years at previous address?</label>
<input id="f2" name="y" type="number">
</fieldset>
</form>

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

<form name="form1" onsubmit="false">
<fieldset>
<legend>Relevant fields</legend>
<label title="try with 5 and then with 3"
for="f1">Number of years at current address?</label>
<input id="f1" name="x" type="number"/><br/>
<label title="Needed if years at current address is less than 4"
for="f2">Number of years at previous address?</label>
<input id="f2" name="y" type="number" relevant="x < 4"/>
</fieldset>
</form>

Dave Raggett <dsr@w3.org>