Help With JavaScript DOM getElementBy stuff

[ppc_michael]

I have a PHP script that prints out a <div> with form elements containing data for each entry. Very simplified, this is what it's like:

<div id="box_1">
	<input name="title" type="text" value="Some title from the db"/>
	<textarea name="article">Article text here</textarea>
</div>

<div id="box_2">
	<input name="title" type="text" value="Some other title from the db"/>
	<textarea name="article">Article number 2 here</textarea>
</div>

...etc, etc.

I'd like to use Javascript to access the values from some of these form elements. So I tried using document.getElementById("box_1").getElementsByName("title").value, but that doesn't work.

How can I do this? I don't really want to give every <input> an id like "title_4" and "article_4" and use getElementById(), because that seems less structured, you know?

 

[hanschien]

It's not a good idea to name two input boxes the same name on one HTML page unless they are part of two different <forms>.

 

[ppc_michael]

So how should I structure it?

 

[c-Row]

They all need to have a unique name, like "box_1", "box_2" and so on.

For DOM access, you might want to take a look at Prototype - it really makes working with these so much easier.

 

[epochblue]

I'd use getElementsByTagName instead. Since you know the structure of the HTML, it'd be fine to do this instead:

document.getElementById("box_1").getElementsByTagName("input")[0].value

Of course, that assumes the INPUT element you're interested in is the first one under what's returned by getElementById(), if there is more than one input element, that is. As for DOM scripting in general, I'd check out w3schools and read up on what methods are available to you and how they work.

Oh, and BTW, the problem in the OP is that you have two elements named "title", so getElementsByName() is returning an array of DOM elements with name "title."

 

[ppc_michael]

I'd use getElementsByTagName instead.

Thanks very much, epoch! That's exactly what I needed.

For future reference, giving each form element a unique ID is truly the "right" way to do it? That just seems so strange to me, coming from an object-oriented background where the goal is to eliminate that sort of code.

 

[epochblue]

Thanks very much, epoch! That's exactly what I needed.

For future reference, giving each form element a unique ID is truly the "right" way to do it? That just seems to strange to me, coming from an object-oriented background where the object is to eliminate that sort of code.

If you know the structure of the markup, and it won't change, doing it the way I've showed you is just fine. You could give everything a unique ID/name if you'd like, though. Giving each form element a unique name is important for back-end processing, but that might also depend on what you're using for the back-end. I know I've done some Java in the past where multiple form elements with the same name were picked up by the Java as an array. That worked out really well for me, but it may not work out quite as nicely with what you're using.

To answer your question a different way, HTML is a markup "language," so typical OO principles don't necessarily apply. The DOM methods you're using are just a way to get to those specific elements, so try not to think about that in terms of OO vs non-OO.