Help With JavaScript DOM getElementBy stuff

Discussion in 'Web Design and Development' started by ppc_michael, Jul 9, 2007.

  1. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #1
    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:

    Code:
    <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?
     
  2. hanschien macrumors 6502

    hanschien

    Joined:
    Oct 2, 2006
    Location:
    Houston, TX
    #2
    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>.
     
  3. ppc_michael thread starter Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
  4. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #4
    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.
     
  5. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #5
    I'd use getElementsByTagName instead. Since you know the structure of the HTML, it'd be fine to do this instead:

    Code:
    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."
     
  6. ppc_michael thread starter Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #6
    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.
     
  7. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #7
    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.
     

Share This Page