1

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.

Improve this question

4 Answers 4

Reset to default
3

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Not sure the order match the order they appear.. have you tested it?
@Shadow Wizard by my experience and all documentation I've read they're supposed to be in order.
@Shadow Wizard I just tested it successfully in jsfiddle: jsfiddle.net/DLrCY
Thanks. How do I get the child elements of the form elements though? I believe I tried document.forms[0].elements[0].elements[0] and document.forms[0].elements[0].forms[0].elements[0]. I'm sure those both seem pretty dumb to anyone who knows a thing or two about javascript. I didn't try document.forms[0].elements[0][0] but I doubt that would work either.
Oh. I see now that document.forms[0].elements[] will grab ALL the elements inside the form, regardless of whether they are inside another element.
|
1

Yes, you can get a list of children of the div element with id formContent, then iterate through that array.

var div = document.getElementById("formContent");
for(var i = 0; i < div.childNodes.length; i++) {
    // do something with this element;
}

Note that this is going to return ALL of the direct children of the div (including the lists), so you'll need to do some extra processing and some additional traversal to handle those and get the input elements contained within them.

Improve this answer

3 Comments

Good and correct idea, but it will fail to reach the elements inside the lists.
@Shadow Wizard I realised that myself after I'd posted, and updated the answer to address that.
Well, you can have recursive function but Michael way is better by all means now that it's proved to keep the order.
0 
var get_div = document.getElementsByTagName("*");

 for( var i=0; i<get_div.length; i++ )// total no of child including all node ex:text,element
  {
 var child_length=get_div[i].childNodes.length;    // to get child of particular node. 
 for( j=0; j<child_length; j++ )
     {
       some code;;;
     }
  }
Improve this answer

Comments

0

If you need the solution in JQuery it would be like that.

$('div > input[type=text]').each(function(){
  this.value = "some new value";
});

Edit

If you need the solution in simple JS you will be doing like this.

var yourForm = document.forms[0];

// Loop over the form elements
for (var i=0; i < yourForm.elements.length; i++) {
  if( /^text/.test( els[j].type ) ){// check for text boxes
    yourForm.elements.value = "new Value";
  }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.