newbie: variable interpolation in functions

[seven.reeds]

Hi,

I am trying to create a somewhat generic function to set the initial
focus for a form. I am tryig:

function set_focus(formID, elID)
{
var form = null;
if (document.getElementById)
{
form = document.getElementById(formID);
} else if (window.formID) {
form = window.formID;
}
if (form)
{
form.elID.focus();
}
}

I have been using firefox and its js console tells me that "elID" has
no values when I call it as "set_focus('formName', 'firstInputName')".
It does work if I hardcode the name of the form element in the
function, a la:

form.firstInputName.focus();

How are arguments interpolated in js?

 

[Richard Cornford]

seven.reeds wrote:

if (form)
{
form.elID.focus();

The error is in this line, and means that - form.elID - is not an
object (so has no properties). The form does not have a property called
'elID'.

}
}

I have been using firefox and its js console tells me that "elID" has
no values when I call it as "set_focus('formName', 'firstInputName')".
It does work if I hardcode the name of the form element in the
function, a la:

form.firstInputName.focus();

How are arguments interpolated in js?

Much as you expect. Your problem is with the property accessor. See:-

<URL: http://jibbering.com/faq/#FAQ4_39 >

Richard.

 

[George3]

form.elID.focus();

That's your problem. You need to handle the variable argument "elID"
the same way you handle "formID" - in other words, use getElementById
so it's something like this:

function set_focus(formID, elID) {
var form = null;
if (document.getElementById) {
form = document.getElementById(formID);
var e = document.getElementById(elID);
if (form) {
e.focus();
}
} else if (window.formID) {
form = window.formID;
if (form) {
form.elID.focus();
}
}
}

When called this way:
set_focus('f1', 'e1');

For a form like this:
<form id="f1" action="doSomething-req.attribute">
<p>
<input type="text" id="e0" />
<input type="text" id="e1" />
<input type="text" id="e2" />
</p>
</form>

 

[seven.reeds]

Thanks to you both. Both ideas seem to work like champs

cheers

 

[Michael Winter]

That's your problem. You need to handle the variable argument "elID"
the same way you handle "formID" - in other words, use getElementById

[snip]

Quite the opposite: don't use the getElementById method in relation to
forms and form controls at all.

A form can be accessed using its id or name attribute value, or by
ordinal using the forms collection:

document.forms['formNameOrID']

As the contents of the brackets can be any legal expression, it can also
be a variable that, when converted to a string, yields the name (or id)
of a form:

document.forms[formID]

Once a reference to the form has been obtained, the controls within that
form can be accessed using the elements collection, again by name, id,
or ordinal:

form.elements['controlName']

These collections have better support across browsers.

The set_focus function would be better written as:

function set_focus(formId, elementId) {
var control = document.forms[formId].elements[elementId];

if (control.focus) control.focus();
}

Note that event-driven code can often obtain a reference to forms and
controls in a much easier way. When an event listener is executed, the
this operator will refer to the element to which it is attached. For
example,

function validate(form) {
/* ... */
}

<form ... onsubmit="return validate(this);">

the validate function will be called with a reference to the form that
is about to be submitted.

With form controls, a reference to the form can be obtained from the
form control itself: each element references the enclosing form via the
form property.

function myFunction(control) {
var form = control.form;
}

<input type="text" id="e0" />

I would say that it is generally inadvisable to use id attributes on
form controls for the purpose of scripting; just use the name attribute.
It is a different matter if that control is to be targeted by the label
element (using the for attribute) or CSS.

There is also little use in serving XHTML-like markup to clients.

Mike

 

[George3]

Quite the opposite: don't use the getElementById method in relation to
forms and form controls at all.

A form can be accessed using its id or name attribute value, or by
ordinal using the forms collection:

document.forms['formNameOrID']

I stand corrected. Mike's method is clearly superior. To the original
poster - forget about my solution using getElementById for forms,
although I'm sure you'll come across non-form situations where in
Firefox and other browsers that follow the standard, you often have to
use getElementById instead of "property accessors" as Richard said.

There is also little use in serving XHTML-like markup to clients.

There was to me - the editor I happened to be using wouldn't let me
save the file unless it was valid XHTML. ;-)