name vs. id reference

[pnj]

Hi,

I'm wondering if anyone can point me to a site that explains clearly when to use the name attribute, and when to use id?  To now, I've been using them as duplicates of the same feature: <input name="foo" id="foo" ... />.

If my only use of these attributes is to access elements through document.getElementById(), can I just use id?  When do I need to use name?

Thanks

pnj

[joshi_v]

mostly IDs will be used in CSS .
check this tutorial..

http://www.w3.org/TR/html4/struct/global.html

Hopes  this helps you.

[pnj]

Thanks for the w3 site.

What I understand is that the name attribute is required to pass form information in an http get or post.  The id is necessary to access via getElementById().  So I guess it is correct to use name=x id=x for all form entries where I need both these options.

Yeah?

-pnj

[obsidian]

[quote author=pnj link=topic=113978.msg463592#msg463592 date=1162818579]
What I understand is that the name attribute is required to pass form information in an http get or post.  The id is necessary to access via getElementById().  So I guess it is correct to use name=x id=x for all form entries where I need both these options.
[/quote]

Let me ask this: why is it necessary to use [b]both[/b] name [b]and[/b] id fields for one element? You can reference an element by either, and since you [i]typically[/i] aren't going to be using the same javascript functions one input fields as you would on other elements throughout your document, why not just reference by name? I can't say that there is a right and wrong way to use them, but there is definitely a point when you want to optimize your code and leave your markup as clean as possible while allowing your javascript to be flexible.

Can you give us an example of why you would need both?

[pnj]

I think I do need both.  The input fields are in a form that is being submitted in a POST, so I need the names.

The validation function checks the elements by walking through an array of id names and loading form elements with getElementById().  The reason I don't just walk through document.forms[] is because the validation function is generated in php, and the array with id names also has a lot of information on required fields, min/max values, field types and so on.  Perhaps this function can be improved...  right now it looks something like this in pseudocode:

[code]ids = Array ( ... list of ids generated from php ... )
types = Array ( ... list of types (i.e. text, integer, decimal, date) generated from php ... )
reqs = Array ( ... 0 or 1 says whether each element is defined ... )

for (i=0; i < ids.length; i++) {
  // validate ids[i], based on info in types[i] and reqs[i];
}
[/code]

While I could put the three arrays into an array of objects with the same characteristics, this seems pretty much equivalent to me.  Do you see a better way to structure this?

Thanks

pnj

[KevinM1]

Once you have a form's id, you don't need an id for each input.  So long as the inputs have a name (which, in your case, they must), you can still access them.

[code]
var form = document.getElementById('formId');
var name = form.name;
var email = form.email;
var password = form.password;
.
.
.
//this example assumes your form has inputs with the names name, email, and password
[/code]

[fenway]

You should be looking in .form.elements... but yes, if you have the form object, you don't need an ID, because it's already in the DOM.

[pnj]

Alright, this gets me halfway there.

But what do you suggest for store additional metadata about form fields that I can access in a validation function?

Ideally, I would like to do something like this:
[code]
<input name='first_name' type='text' format='text' required='1'>
<input name='height' type='text' format='integer' required='0' min='15' max='200'>
[/code]

And then be able to access those additional attributes in a validation function through form.elements.  But as far I know, the attributes in the code above will be thrown away by the DOM.

How should I think about approaching this?

Thanks!
-pnj

[fenway]

IE will allow for these expand-properties, but FF does not... just store them in script.

[pnj]

Alrighty, thanks.  I thought there might be a more elegant approach, but it ain't broke, so...
-pnj

[fenway]

The more elegant approach would be for FF to not blow chunks if a few extra parameters are there, but those won't validate, so it barfs.