- From: Dave Raggett <dsr@w3.org>
- Date: Wed, 14 Mar 2007 18:53:49 +0000 (GMT)
I am trying to put together a demo for Web Forms 2.0 where each row has a product name, quantity and unit price, and there is a summary field at the end of the form showing the total price. I have been able to get the repetition to work fine, once I realized that the thead and tbody elements are needed, without them the column headers mysteriously appear at the bottom of the table, but perhaps that's just a bug in Opera 9. What I haven't yet worked out is how to address the fields in each row from the onforminput event handler set on the form element. In the following, I get an alert that the form object is missing the row, and then an error. Any ideas on how to address the fields in a script that iterates across the rows and fields? <script type="text/javascript"> function update() { var form = document.forms[0]; if (!form) alert("missing form"); if (!form.row) alert("form is missing row"); alert("rows = " + form.row[0].item.value); } </script> <form name="form1" onsubmit="false" onforminput="update()"> <fieldset name="lineItem"> <legend>Repeating groups of fields</legend> <table> <tr> <td>Product Name</td> <td>Quantity</td> <td>Price Per Unit</td> </tr> <tr id="lineitem" repeat="template" repeat-start="4"> <td><input name="row[lineitem].item" type="text" title="product name"></td> <td><input name="row[lineitem]quantity" type="number" title="number purchased"></td> <td><input name="row[lineitem]unitprice" type="number" title="price per unit"></td> </tr> </table> </fieldset> <p><label for="total">Total price</label> <input name="total" readonly="readonly"> <button type="submit">Submit</button> <button type="reset">Reset</button></p> </form> Dave Raggett <dsr at w3.org> http://www.w3.org/People/Raggett
Received on Wednesday, 14 March 2007 11:53:49 UTC