dynamically set element name in form validation script

[rizlaa]

i have a javascript function which sets the value of a column in a form. the column to be updated is passed as a parameter to the function.

i am currently doing the following:
function updateCol(colNum)
if (colNum == "f02")
document.forms["form1"].f02[0].value = 'U';
else if (colNum == "f04")
document.forms["form1"].f04[0].value = 'U';
}

is there any way of switching the code fragment
document.forms["form1"].f02[0].value
to using the colNum parameter???

thereby removing the need for the if else clause?

[DimX]

What is this column exactly? What element?
The easiest way is perhaps this:

eval("document.forms['form1']." + colNum + "[0].value = 'U';");

(some quote problems may occur, escape " with \" )

[mwinter]

eval("document.forms['form1']." + colNum + "[0].value = 'U';");

Yikes! Never use the eval function to do that.

document.forms.form1.elements[colNum + '[0]'].value = 'U';

Bracket notation can always be used to generate and access property names at run-time. The contents of the brackets can be any legal expression. Once evaluated, it will be converted to a string and that string becomes the property name used.

See How do I access a property of an object using a string? in the comp.lang.javascript FAQ, particularly the linked document (which provides a much more complete explanation of bracket notation).

Mike

[rizlaa]

I have tried your double brackets method

document.forms.form1.elements['f0' + colNum + '[rowNum - 1]'].value = 'U';
and also tried
document.forms.form1.elements['f0' + colNum + '[' + (rowNum - 1) + ']'].value = 'U';

(rowNum is the calculated row i put [0] in my original post to keep it simple)

but this gives me a
document.forms.form1.elements[...]' is null or not an object error

any ideas as to why this would be??

[mwinter]

Not without seeing your code in action (post a link if you still have trouble). However, I would start by checking what the generated property name really is. In your original post, it seemed to be a string. Was that also a simplification?

For example, you might try including:

alert(colNum + ' ' + rowNum + ' ' + ('f0' + colNum + '[' + (rowNum - 1) + ']'));

before trying to access the form element. A sequence like "2 5 f02[4]" is what you should expect if colNum is 2 and rowNum is 4, but is the result very different?

Mike

[rizlaa]

I have typed in your alert as specified and the alert box that popsup shows the output as you have stated. "2 5 f02[4]".

have tried the following with the same error being displayed:
document.forms.form1['f0' + colNum + '[' + (rowNum - 1) + ']'].value = 'U';

The above should equate the values in the [] as in the alert test?
any additional help much appreciated (i'm afraid my app is not externally visible.)

[mwinter]

I have typed in your alert as specified and the alert box that popsup shows the output as you have stated. "2 5 f02[4]".

Then you should know the values that cause it to fail: the last message to appear before the error should display values that refer to a form control that doesn't exist.

For example, can colNum ever reach double digits? With the currently suggested code, that would produce a leading sequence like "f013", which is unlikely to exist. Similarly, could rowNum ever be zero? That would produce a trailing sequence like "[-1]".

have tried the following with the same error being displayed:
document.forms.form1['f0' + colNum + '[' + (rowNum - 1) + ']'].value = 'U';

The above should equate the values in the [] as in the alert test?

Yes.

Try the following snippet:

function test() {
    var colNum = 1,
        rowNum = 1;

    alert(document.forms.myForm.elements['f0' + colNum + '[' + (rowNum - 1) + ']'].value);
}

<form id="myForm" name="myForm" action="">
    <div>
        <input name="f01[0]" value="Some value">
        <input type="button" value="Test" onclick="test();">
    </div>
</form>

If you include that in a simple HTML document and click the button, a dialogue box will display "Some value".

i'm afraid my app is not externally visible.

Fine, but unless you post code, no-one here can help you debug the problem.

At the minimum, you need to include the form element and its contents, the function where you attempt to access the form controls, as well as the functions that call it and those that it calls. Ideally, though, you would create a separate, and simpler test case - you might even find the error yourself doing that.

Mike

[Twey]

eval("document.forms['form1']." + colNum + "[0].value = 'U';");

Wouldn't that be better translated as:

document.forms.form1.elements[colNum][0].value = 'U';

?

[mwinter]

document.forms.form1.elements[colNum][0].value = 'U';

It would seem that I was getting caught up in the thought of PHP-like control names, like "f02[0]", rather than several controls with the same "f02" name.

Cheers, Twey (and apologies to the OP).

Mike

[Twey]

(sets "number-of-times-Mike's-been-wrong" counter to 3)