How to reference an element passed by ID to function using getElementByID

[JJA]

I'm trying to use document.getEle mentByID inside a function where the
ID is passed as an argument. I get the same error ("Element has no
properties") on the same statement inside the commonCheck function
with either MS IE 6.0 or Mozilla Firefox 0.9. Comments below indicate
that if I hardcode an element ID I can avoid the error, but I
obviously want to parameterize it. Here are some snippets of my code:

-----snippet 1-------------------------------------------------------
<form method="POST" action="UserPro fileMaint.htm"
onSubmit="retur n validateTelnr ("txtPhone", "msgPhone", true);">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table id="tblMain" border="0" width="100%">
<tr>
<td width="25%">&nb sp;</td>
<td width="25%">Pho ne</td>
<td width="25%"><in put type="text" name="txtPhone" id="txtPhone"
size="20"></td>
<td width="25%"><in put type="hidden" name="msgPhone"
id="msgPhone"> </td>
</tr>
-----snippet 2-------------------------------------------------------
function validateTelnr (vfld, // element to be validated
ifld, // id of element to receive
info/error msg
reqd) // true if required
{
var stat = commonCheck (vfld, ifld, reqd);
-----snippet 3-------------------------------------------------------
function commonCheck (vfld, // element to be validated
ifld, // id of element to receive
info/error msg
reqd) // true if required
{
if (!document.getE lementById)
return true; // not available on this browser - leave validation
to the server

var elem = document.getEle mentById(ifld); // this will fail on next
stmt
//var elem = document.getEle mentById("txtPh one"); //COMMENTED OUT:
this works
if (!elem.firstChi ld) //------> fails here with msg "elem has no
properties"
return true; // not available on this browser
if (elem.firstChil d.nodeType != node_text)
return true; // ifld is wrong type of node

if (emptyString.te st(vfld.value)) {
if (reqd) {
msg (ifld, "error", "ERROR: required");
vfld.focus();
return false;
}

[RobG]

JJA wrote:

I'm trying to use document.getEle mentByID inside a function where the [snip] <td width="25%">&nb sp;</td>
<td width="25%">Pho ne</td>
<td width="25%"><in put type="text" name="txtPhone" id="txtPhone"
size="20"></td>
<td width="25%"><in put type="hidden" name="msgPhone"
id="msgPhone"> </td>
</tr>

[snip]

Please replace tabs with spaces (2 per tab is nice), and manually
wrap your lines at about 65 characters (allows for a couple of sets
of reply quotes).

Then re-post your code. I can't tell if the errors are my attempt
to fix the format or your coding.

Cheers, Rob.

[RobG]

JJA wrote:

[snip]

onSubmit="retur n validateTelnr ("txtPhone", "msgPhone", true);"> [snip] function validateTelnr (vfld,ifld,reqd ) [snip] var stat = commonCheck (vfld, ifld, reqd); [snip] function commonCheck (vfld,ifld,reqd ) [snip] var elem = document.getEle mentById(ifld); // this will fail on next
// stmt
//var elem = document.getEle mentById("txtPh one"); //COMMENTED OUT:
//this works
if (!elem.firstChi ld) //------> fails here with msg "elem has no
// properties"

If I have re-formatted your code right (chances are I haven't), you are
putting "txtPhone" into vfld when you call validateTelnr() . You then
keep passing the variables on subsequent calls using the same names
each time.

When you get down to snippet 3, you are expecting "txtPhone" to be in
variable ifld - but you seem to have kept putting it into vfld.

vfld (I think) is getting the string "msgPhone", a hidden input field
that has a *name* but no *id*, so there is no id="msgPhone" and the
call returns nothing - exactly as it should.

A simple debug is to put an alert just before you use a variable to
find out what its value is at the critical moment, either working
backwards from the failure or forwards from the top to see where in
breaks. In this case, a line like:

alert(' vfld is: ' + vfld
+ '\n ifld is: ' + ifld
+ '\n reqd is: ' + reqd);

would have shown it was right at the start...

Hope that helps - Rob.

[Eloi de San Mart?n Lagranje]

There is no problem of using getElementById whith passed arguments, try this:
<a id="o22" href="#">asda</a><script>
function ig(id){
document.getEle mentById(id).st yle.visibility = 'hidden';
}
ig('o22');
</script>
A posible problem is calling the function passing an object instead of an string:

<script>
ig('o22'); // Correct (passing an string)
ig(o22); // Bad (passing an object (variable))
</script>

jo***@cbmiweb.c om (JJA) wrote in message news:<2c******* *************** ****@posting.go ogle.com>...

I'm trying to use document.getEle mentByID inside a function where the
ID is passed as an argument. I get the same error ("Element has no
properties") on the same statement inside the commonCheck function
with either MS IE 6.0 or Mozilla Firefox 0.9. Comments below indicate
that if I hardcode an element ID I can avoid the error, but I
obviously want to parameterize it. Here are some snippets of my code:

-----snippet 1-------------------------------------------------------
<form method="POST" action="UserPro fileMaint.htm"
onSubmit="retur n validateTelnr ("txtPhone", "msgPhone", true);">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table id="tblMain" border="0" width="100%">
<tr>
<td width="25%">&nb sp;</td>
<td width="25%">Pho ne</td>
<td width="25%"><in put type="text" name="txtPhone" id="txtPhone"
size="20"></td>
<td width="25%"><in put type="hidden" name="msgPhone"
id="msgPhone"> </td>
</tr>
-----snippet 2-------------------------------------------------------
function validateTelnr (vfld, // element to be validated
ifld, // id of element to receive
info/error msg
reqd) // true if required
{
var stat = commonCheck (vfld, ifld, reqd);
-----snippet 3-------------------------------------------------------
function commonCheck (vfld, // element to be validated
ifld, // id of element to receive
info/error msg
reqd) // true if required
{
if (!document.getE lementById)
return true; // not available on this browser - leave validation
to the server

var elem = document.getEle mentById(ifld); // this will fail on next
stmt
//var elem = document.getEle mentById("txtPh one"); //COMMENTED OUT:
this works
if (!elem.firstChi ld) //------> fails here with msg "elem has no
properties"
return true; // not available on this browser
if (elem.firstChil d.nodeType != node_text)
return true; // ifld is wrong type of node

if (emptyString.te st(vfld.value)) {
if (reqd) {
msg (ifld, "error", "ERROR: required");
vfld.focus();
return false;
}

[Michael Winter]

On 14 Oct 2004 19:59:33 -0700, JJA <jo***@cbmiweb. com> wrote:

I'm trying to use document.getEle mentByID inside a function where the ID
is passed as an argument.
Based on what you've shown, you don't need to. Instead, use the elements
collection for the containing form:

document.forms['formNameOrId'].elements[ ... ]

If the form you've posted is the only one, you could also use

document.forms[0].elements[ ... ]

The elements collection will try to find id matches first, but if none can
be found it will try names.
I get the same error ("Element has no properties") on the same statement
inside the commonCheck function with either MS IE 6.0 or Mozilla Firefox
0.9.
I can't honestly say why. There's nothing obvious in the code you show
that would cause the behaviour you describe. It's already been suggested
that you use alerts to check the values of the function arguments at each
stage, and I think that would be a good thing to do.

What is causing your problem is that the value you pass to getElementById
doesn't represent a id that the browser can find. You'll have to look at
why that happens.

[snip]
if (!elem.firstChi ld)
return true;
if (elem.firstChil d.nodeType != node_text)
return true; // ifld is wrong type of node

You do realise that this will always fail for INPUT elements, don't you.

Good luck,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Lee]

JJA said:

I'm trying to use document.getEle mentByID inside a function where the
ID is passed as an argument. I get the same error ("Element has no
properties") on the same statement inside the commonCheck function
with either MS IE 6.0 or Mozilla Firefox 0.9. Comments below indicate
that if I hardcode an element ID I can avoid the error, but I
obviously want to parameterize it. Here are some snippets of my code:

-----snippet 1-------------------------------------------------------
<form method="POST" action="UserPro fileMaint.htm"
onSubmit="retur n validateTelnr ("txtPhone", "msgPhone", true);">

txtPhone and msgPhone are NOT the id's of any elements.
They are the names of form fields. That's very different.
You shouldn't be passing either one though, you should pass
references to these elements:

onsubmit="retur n validateTelnr(t xtPhone, msgPhone, true)"

Then, within the validation code, you don't need to mess with firstChild()
or nodeType() methods, you simply access the value attribute of the
form field:

if (emptyString.te st(vfld.value)) {
...
}

[Michael Winter]

On 15 Oct 2004 07:36:05 -0700, Lee <RE************ **@cox.net> wrote:

[snip]

txtPhone and msgPhone are NOT the id's of any elements.

Actually, they are. Look closer at the contents of the table.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[JJA]

el************@ gmail.com (Eloi de San Mart?n Lagranje) wrote in message news:<f9******* *************** ****@posting.go ogle.com>...

There is no problem of using getElementById whith passed arguments, try this:
<a id="o22" href="#">asda</a><script>
function ig(id){
document.getEle mentById(id).st yle.visibility = 'hidden';
}
ig('o22');
</script>
A posible problem is calling the function passing an object instead of an string:

<script>
ig('o22'); // Correct (passing an string)
ig(o22); // Bad (passing an object (variable))
</script>

Thank you! This example led me to fix the immediate problem. I had
tried passing the string to the function in double quotes and got a
syntax error. Your solution uses single quotes around the ID string
which I had not tried (I thought either was acceptable in Javascript
as long as they were not 'unbalanced"... ..

and now I am on to a new problem

[Lee]

Michael Winter said:

On 15 Oct 2004 07:36:05 -0700, Lee <RE************ **@cox.net> wrote:

[snip]

txtPhone and msgPhone are NOT the id's of any elements.

Actually, they are. Look closer at the contents of the table.

Ah, yes. They had wrapped.

I'll emphasize again though, that it's not appropriate to
use these id's when it's even simpler to pass references.

[Michael Winter]

On 15 Oct 2004 09:28:56 -0700, JJA <jo***@cbmiweb. com> wrote:

[snip]

I had tried passing the string to the function in double quotes and got
a syntax error. Your solution uses single quotes around the ID string
which I had not tried (I thought either was acceptable in Javascript as
long as they were not 'unbalanced"... ..

and now I am on to a new problem

From your original post:

onSubmit="retur n validateTelnr ("txtPhone", "msgPhone", true);"

I missed this: the problem is your nested double quotes.

Whilst it is true that you can use either double or single quotes (I
prefer the latter for this very situation), you cannot nest quotes in
HTML. Had you validated your HTML (<URL:http://validator.w3.or g/>), you
would have discovered this.

There are two fixes:

1) Use single quotes in attribute values.
2) Use the &quot; character entity.

However, please read my other post in this thread (if you haven't already).

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.