...

View Full Version : Accessing Form Objects By Name Is Always "Undefined"



lightnb
09-03-2008, 06:50 PM
My HTML is loaded with IDs, because getElementById seems to be the only way to get an element, that actually works.

Theoretically, you're supposed to be able to go to an object using names. For example I have a form named "StoreFrontContact" and an input field named "Phone". So I should be able to access the input field value with:
document.StoreFrontContact.Phone.value
but I get the error:

document.StoreFrontContact.Phone is undefined
Even though there is a form named "StoreFrontContact", with a text field named "Phone".

Does every level count? So if the form is in a div and the input is in a fieldset, do I need to give those elements names too? That seems just as bad as giving every input field an id.

Cranford
09-03-2008, 06:55 PM
var nPhone = document.forms['StoreFrontContact']['Phone'].value

oesxyl
09-03-2008, 07:03 PM
My HTML is loaded with IDs, because getElementById seems to be the only way to get an element, that actually works.

Theoretically, you're supposed to be able to go to an object using names. For example I have a form named "StoreFrontContact" and an input field named "Phone". So I should be able to access the input field value with:
document.StoreFrontContact.Phone.value
but I get the error:

document.StoreFrontContact.Phone is undefined
Even though there is a form named "StoreFrontContact", with a text field named "Phone".

Does every level count? So if the form is in a div and the input is in a fieldset, do I need to give those elements names too? That seems just as bad as giving every input field an id.
could something else in your case but check how name attribute is spelled. javascript is case sensitive so Phone is different then phone.
Anyway there are another two ways of accessing forms:

http://www.javascriptkit.com/jsref/form.shtml

I hope this help.

best regards

lightnb
09-03-2008, 07:21 PM
I'm now trying:


var nPhone = document.forms['StoreFrontContact']['Phone'].value;

and getting:


document.forms.StoreFrontContact.Phone is undefined

I double-checked the spelling, and they're the same, include case.

So forms is an associative array? I thougth JavaScript didn't support those?

And why the 'n' before 'Phone' in the variable name?

Thanks!

Cranford
09-03-2008, 07:26 PM
Are you waiting until the document loads?

Place in the Head:


<script type="text/javascript">

onload = function(){alert(document.forms['StoreFrontContact']['Phone'].value)}

</script>

You may address a form either by its ordinal number or name. If you have only one form on the page:


document.forms[0]

is the same as,


document.forms['StoreFrontContact']

The "n" is my system of notation, so that I don't use a variable name that is the same as a form field name.

lightnb
09-03-2008, 07:40 PM
The onload code gives the same error:

document.forms.StoreFrontContact.Phone is undefined

I don't think it's a loading order problem: my call to the form element resides in a validation function that only runs when the user clicks the "save" button.

Unless I'm missing something stupidly obvious?

oesxyl
09-03-2008, 07:50 PM
The onload code gives the same error:

document.forms.StoreFrontContact.Phone is undefined

I don't think it's a loading order problem: my call to the form element resides in a validation function that only runs when the user clicks the "save" button.

Unless I'm missing something stupidly obvious?
can you post a link to that page?

best regards

Cranford
09-03-2008, 07:53 PM
The following works, for both onload, and upon submit:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validate(nForm){

alert(nForm['Phone'].value);
return false;
}

onload = function()
{
alert(document.forms[0]['Phone'].value);
alert(document.forms['StoreFrontContact']['Phone'].value);
}

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
form {width: 620px; margin: auto; font-family: times; font-size: 12pt;}
fieldset {width: 620px; background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
.submitBtn {font-family: tahoma; font-size: 10pt; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
<body>
<form name="StoreFrontContact" action="" method="post" onsubmit="return validate(this)">
<fieldset>
<legend>Form</legend>
<input type="text" name="Phone" value="hello">
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>

lightnb
09-03-2008, 09:55 PM
I ran the page through the W3C Validator, and got this error:


Line 89, Column 14: there is no attribute "name".
<form name="StoreFrontContact">

I was using the XHTML Strict doctype, which apparently doesn't support the "name" attribute. I switched to "transitional" and now the JavaScript works.

Odd...

Thanks guys!

I still don't quite get the tree traversal stuff though... Where you can access elements like an array with brackets [] or using the period. Why do you use one vs the other? And how does it know what's a variable, whats an element name, and what's a function?

And last, how do you call a variable function in javascript? In PHP, you just add parentheses to the end of the variable, and it executes a function with the name of the variable's value, like:



$MyFunction = 'FunctionName';
$Result = $MyFunction();


Thanks!

Cranford
09-03-2008, 10:28 PM
I use JavaScript Object Notation, because I prefer it -- no other reason. I just don't like the dot notation.

And yes, JavaScript supports associative arrays. I use them for dependent select lists. The "value" of the selection from the first list, references the array of options for the second list:


var categories = [];
categories['holidays'] = ["Christmas,New Year,Valentine's Day"];

In forms, many times, several elements, like checkboxes or radio buttons will have the same name, e.g.: name="someBoxes[]"

To step through them, you can use:


document.getElementsByName('someBoxes[]'),

which will return an array.

There is also,


document.getElementsByTagName('td')

which also returns an array.

Global variables in JavaScript are declared outside of functions, declared inside they are local to that function, but can be passed to another function as an argument, if you call that function within the first function.

Any function can access a global variable.




function first(){
var myVar = "hello";
secondFunction(myVar);
}


I believe there is a "new Function()" function in JavaScript to create a function from a variable name, but I've never used it and wouldn't want to. I'm not sure if it's generally supported. I can't think of a reason to create a function from a variable name.

But, you can use a variable to call an existing function, like this:


var myFunction = "init";

window[myFunction]();


that will call the "init" function.


Anyway, that's my two-cents.

Samhain13
09-03-2008, 11:00 PM
I was using the XHTML Strict doctype, which apparently doesn't support the "name" attribute. I switched to "transitional" and now the JavaScript works.

Name attributes can only be used if an ID attribute is also present (I think).

Why not just use IDs in your form elements, along with the NAMEs?


document.getElementById('myInput').value ;

is more convenient to code. That way, you don't have to go through all the form elements and their children just so you can get the value of a specific field. :)

lightnb
09-03-2008, 11:36 PM
Is there something special you have to do to use a variable?

for example:



var ElementName = 'Phone';
ContactForm.ElementName.value = 'some value';


right now it's saying 'undefined' because it's trying to find an element literally name 'ElementName'.

Regarding the question of IDs versus Names, I think it's a bit cleaner using only names, since you have to use names anyway, but I could be wrong. On this page though, I have multiple forms, some with similar field names... so to keep ids unique I would have to specify the form name too, making the id longer: id="ContactInfo_StoreName", instead of just name="StoreName". I suppose it could work either way.

Cranford
09-04-2008, 12:28 AM
You dropped the document.

var elementName = "Phone";

alert(document.forms[0][elementName].value);

lightnb
09-04-2008, 01:48 AM
So why doesn't this work:



var FieldReference = document.forms['StoreFrontContact'][ElementName];
[FieldReference].parentNode.insertBefore(ErrorDiv, [FieldReference]);


It's claiming that "[FieldReference].parentNode is undefined".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum