[whatwg] Scripting and WF2 repetition model?
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
legendRepeating groups of fields/legend
table
tr
tdProduct Name/td
tdQuantity/td
tdPrice Per Unit/td
/tr
tr id=lineitem repeat=template repeat-start=4
tdinput name=row[lineitem].item type=text title=product
name/td
tdinput name=row[lineitem]quantity type=number title=number
purchased/td
tdinput name=row[lineitem]unitprice type=number title=price
per unit/td
/tr
/table
/fieldset
plabel for=totalTotal price/label
input name=total readonly=readonly
button type=submitSubmit/button
button type=resetReset/button/p
/form
Dave Raggett [EMAIL PROTECTED] http://www.w3.org/People/Raggett
Re: [whatwg] Scripting and WF2 repetition model?
On Wed, 14 Mar 2007, Dave Raggett wrote:
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.
[...]
alert(rows = + form.row[0].item.value);
That should be form[row0.item].value.
The [foo] bit in the name= attributes get expanded, so that the names
are row0.item, row1.item, etc; the actual repetition blocks don't have
the square brackets. Look at the post-repetition DOM to see what I mean.
(The square-bracket dereference notation is required because there's a .
in the name of the field.)
Anyway, you just want:
pTotal price: output onforminput=value = total()0/output?p
...with:
script
function total() {
var rows = document.getElementsByTagName('tbody')[0].rows;
var result = 0;
for (var i = 0; i rows.length; ++i) {
var prefix = 'row' + rows[i].repetitionIndex;
result += rows[i].getElementsByName(prefix + 'quantity')[0].value *
rows[i].getElementsByName(prefix + 'unitprice')[0].value;
}
return result;
}
/script
By the way, the [EMAIL PROTECTED] mailing list is probably more appropriate
for this thread. (That's our authoring help mailing list.)
HTH,
--
Ian Hickson U+1047E)\._.,--,'``.fL
http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
