Question

I have a form with multiple text input fields and sub-forms. Is there a way to access everything based on how it appears in the DOM tree?

In other words, if I have

<div id="formContent">
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
</div>

Can I access those in the order they appear and assign them values?

EDIT: The reason I ask is because I will be allowing people to add and remove the main and sub-forms, so I can’t assign them id’s. I also won’t know how many sub-options each form will have.

Answer 1

Assuming they’re wrapped in a <form> tag (which we can’t see here), you can access them via the elements[] array. This does the job when you don’t have id attributes to work with via getElementById()

// Supply the correct index - 0 assumes this is the first form on the page...
var yourForm = document.forms[0];

// Loop over the form elements
for (var i=0; i < yourForm.elements.length; i++) {
  yourForm.elements[i].value = "some new value";
}

Here it is in action: http://jsfiddle.net/DLrCY/