[thelist] Proper way to access elements in a fieldset via DOM?

[Edwin Martin]

Gee Starr wrote:

> Right, so I've been away from JavaScript for three or four years and I
> seem to be a bit stiff in the joints.
> 
> ### The task:
> 
> Use a simple bit of JS to check all text inputs in a form with a similar
> name and display the sum of said fields in another text input.

This works (for 95% of all browsers):

function wksheetTotal() {
   var total = 0;
   fields = document.worksheet.getElementsByTagName( "input" );
   for (var i = 0; i < fields.length; i++)
   {
     if (fields[i].name.indexOf('field') > -1)
     {
         thisnum = parseFloat(fields[i].value);
         total += thisnum;
     }
   }
   document.worksheet.total.value = total;
}

Edwin Martin


> 
> 
> ### The JavaScript function:
> 
> <script language="JavaScript">
> <!--
> function wksheetTotal() {
>   var total = 0;
>   for (var i = 0; i < document.worksheet.elements.length; i++)
>   {
>     if (document.worksheet.elements[i].name.indexOf('field') > -1)
>     {
>         thisnum = parseFloat(document.worksheet.elements[i].value);
>         total += thisnum;
>     }
>   }
>   document.worksheet.total.value = total;
> }
> 
> //-->
> </script>
> 
> 
> ### The form (simplified):
> 
> <form name="worksheet" metod="post" action="">
>   <fieldset>
>     <legend>The Sample Fields</legend>
> 
>       <p>Field one:
>       <input name="field[]" type="text" onChange="wksheetTotal()"
> onKeyUp="wksheetTotal()" value="0" size="3" maxlength="3" />
>       </p>
> 
>       <p>Field two:
>       <input name="field[]" type="text" onChange="wksheetTotal()"
> onKeyUp="wksheetTotal()" value="0" size="3"  />
>       </p>
> 
>       <p>Total:
>       <input name="total" type="text" value="0" size="6" />
>       </p>
> 
>     </fieldset>
> </form>
> 
> 
> Surprisingly (to me), the above scenario will not work. However, it works
> as expected if you remove the fieldset tag from the form. As you can
> expect, the fieldset needs to stay.
> 
> I assume I am tripping over the DOM, but my first half-dozen alternative
> approaches have produced no joy. I welcome the embarrassment of having the
> simple solution pointed out to me.
> 
> Example in action (and of inaction) are available at:
> 
> <http://www.geedev.com/demo/demo-fieldset.htm>
> 
>