[SOLVED] Problem accessing specific form elements

[Sagaris]

Hi all,

I'm a complete javascript noob and have a problem that has been bugging me for a couple of days now.

I have something similar to the following.

Code: Select all

<script>
function findTotal() {
var i;

for(i = 0; i <=3; i++)
    {
  
    itemValue = document.step1.elements['foo1'].value;
    alert(itemValue);   
    }
}

</script>

<form name="step1">

<input type="text" name="foo1" onchange="findTotal();" />
<br />
<input type="text" name="foo2" onchange="findTotal();"  />
<br />
<input type="text" name="foo3" onchange="findTotal();"  />
<br />
<input type="text" name="random" onchange="findTotal();"  />
<br />
<input type="text" name="extra" onchange="findTotal();"  />
<br />

Now this is really simple and works fine to provide me with the value of the foo1 field, however I need to find the value of each field named foo1, foo2.... etc.
I have tried adding the following code to the function so it can access the element name concatenated with the value of i in the loop

Code: Select all

element = '\'foo' + i'\'';
itemValue = document.step1.elements[element].value;
alert (itemValue);

Code: Select all

itemValue = document.step1.elements['weight'[i]'\''].value;
alert (itemValue);

The error I get with the first attempt is document.step1.elements[element].value has no proporties

The error associated with the second method is
findTotal is not defined.

I know I will be kicking myself when somebody tells me the correct syntax, but this is really bugging me!

TIA

[ScottR]

I would usually use getElementById in this instance after I gave the elements ids. What I've seen about the method you are using is that element is an array of form elements. So it would seem logical to me that they would be integers unless you created variables naming those array elements.

Although I haven't used elements[] so I can't be much help.

Scott

[Rakuli]

There's a couple of problems with the code you've give.

element = '\'foo' + i'\'';

is storing a string with the apostrophe literals in there so it is equivalent to using

document.etc.elements['\'foo'+i+'\''];

which is obviously wrong.

As ScottR says above though it is much better to use getElementById();

If you give each form element an ID you can acheive this.

Accessing elements by name only is something that really only works reliably in IE.

If you give all you elements an ID to match its name you can rewrite your function like so..

Code: Select all

function findTotal() {
// get the form to narrow further getelement calls to just the form
var step1 = document.getElementById('step1');

for(i = 0; i <=3; i++)
    {
     // now loop through the foo's an alert each
  
      alert(step1.getElementById('foo' + i));
    }
}

</script>

<form name="step1" id="step1">

<input type="text" name="foo1" id="foo1" onchange="findTotal();" />
<br />
<input type="text" name="foo2" id="foo2" onchange="findTotal();"  />
<br />
<input type="text" name="foo3" id="foo3" onchange="findTotal();"  />
<br />
<input type="text" name="random" id="random" onchange="findTotal();"  />
<br />
<input type="text" name="extra" id="extra" onchange="findTotal();"  />
<br />

This technique uses the DOM to access nodes of (x)HTML and is supported much more widely.

[Sagaris]

Thanks very much for your help guys, the getElementById(); function was exactly what I needed - now completed my function and it works a treat.

[spinal007]

You don't *have* to use getElementdById, it will work the same either way. The problem is that you were looping through numbers 1 to 3 but you were looking for the same element every time.

All you have to do is change this...
itemValue = document.step1.elements['foo1'].value;

...into this:
itemValue = document.step1.elements['foo'+i].value;