Web Forms 2.0 - counting checkboxes

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 for use with Web Forms 2.0:

<script type="text/javascript">
function radioValue(field)
{
  for (i = 0; i < field.length; ++i)
  {
    if (field[i].checked)
      return field[i].value;
  }

  return null;
}

// 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;
}

// count ticked checkboxes within a given fieldset
function count(fieldset)
{
  var fields = fieldset.getElementsByTagName("INPUT");
  var count = 0;

  for (var i = 0; i < fields.length; ++i)
  {
    if (fields[i].type == "checkbox" && fields[i].checked)
      ++count;
  }

  return count;
}

function update()
{
  var form = document.forms[0];
  var size = eval(radioValue(form.size));
  var toppings = fieldset("toppings");
  var price = crustPrice(size)+toppingPrice(size)*count(toppings);
  form.total.value = isNaN(price) ? "" : price;
}
</script>

<form name="form1" onforminput="update()">
<fieldset>
<legend>Create your own pizza!</legend>
<fieldset class="size">
<legend>Size</legend>
<input id="size12" name="size" type="radio" value="12">
<label for="size12">12 inch (6 slices)</label>
<br />
<input id="size14" name="size" type="radio" value="14">
<label for="size14">14 inch (8 slices)</label>
<br />
<input id="size18" name="size" type="radio" value="18">
<label for="size18">18 inch (12 slices)</label>
</fieldset>
<fieldset class="crust">
<legend>Crust</legend>
<input id="crust1" name="crust" type="radio" value="regular">
<label for="crust1">Regular</label>
<br />
<input id="crust2" name="crust" type="radio" value="thin">
<label for="crust2">Thin</label>
<br />
<input id="crust3" name="crust" type="radio" value="thick">
<label for="crust3">Thick</label>
</fieldset>
<fieldset class="toppings" name="toppings">
<legend>Toppings</legend>
<input id="topping1" name="cheese" type="checkbox" value="cheese">
<label for="topping1">Extra cheese</label>
<br />
<input id="topping2" name="peperoni" type="checkbox" value="peperoni">
<label for="topping2">Pepperoni</label>
<br/>
<input id="topping3" name="salami" type="checkbox" value="salami">
<label for="topping3">Salami</label>
<br />
<input id="topping4" name="sausage" type="checkbox" value="sausage">
<label for="topping4">Sausage</label>
<br />
<input id="topping5" name="jalapenos" type="checkbox" value="jalapenos">
<label for="topping5">Jalapenos</label>
<br />
<input id="topping6" name="peppers" type="checkbox" value="peppers">
<label for="topping6">Bell peppers</label>
<br />
<input id="topping7" name="onions" type="checkbox" value="onions">
<label for="topping7">Onions</label>
</fieldset>

<p><span class="right">
<button type="submit">Add to my order</button>
<button type="reset">Reset</button></span>
<label for="total">Total price</label>
<input name="total" readonly="readonly"></p>
</fieldset>
</form>

The XForms Transitional markup for this example is the same except for the deletion of the onforminput attribute on the form element, and the addition of the calculate attribute on the input element for the total price, which replaces the script element needed with Web Forms 2.0. In both approaches, the functions crustPrice and toppingPrice are defined by the web page author and aren't shown here:

<input name="total" readonly="readonly"
  calculate="crustPrice(size)+toppingPrice(size)*count(toppings)"/>

Dave Raggett <dsr@w3.org>