JavaScript function for assigning Tallinn numbers?

Question

I have a form with many fields, and I gave each separate input, select and run the tabindex number. This works, but I would like to do it programmatically.

The tabindex line is incorrect by default, because I have a two-column layout with groups in each column. I want to go down the group. How can I write the body.onload function so that it assigns all input, select and button tags to the number tabindex based on the containing div? For example, for a div, I want the loop to be executed first, all input, selection and button tags could have tabindex=1 , and all input, selection and button tags in the second div could have tabindex=2 , and therefore on.

Thanks!

Here's a simplified example.

 <style> .a { display: inline-block; width:200px; border: 1px solid black; } </style> <div class="a"> <div id="Div01" title="these inputs should have tabindex=1"> <p>Div 01</p> <input id="Div01Field1" type="text" value="Me first"/> <input id="Div01Field3" type="text" value="Me second"/> <input id="Div01Field2" type="text" value="Me third"/> <hr> </div> <div id="Div03" title="these inputs should have tabindex=3"> <p>Div 03</p> <input id="Div03Field1" type="text" value="Me seventh"/> <input id="Div03Field2" type="text" value="Me eighth"/> <input id="Div03Field3" type="text" value="Me ninth"/> <hr> </div> <div id="Div05" title="these inputs should have tabindex=5"> <p>Div 05</p> <input id="Div05Field1" type="text" value="Me thirteenth"/> <input id="Div05Field2" type="text" value="Me fourteenth"/> <input id="Div05Field3" type="text" value="Me fifteenth"/> </div> </div> <div class="a"> <div id="Div02" title="these inputs should have tabindex=2"> <p>Div 02</p> <input id="Div02Field1" type="text" value="Me fourth"/> <input id="Div02Field2" type="text" value="Me fifth"/> <input id="Div02Field3" type="text" value="Me sixth"/> <hr> </div> <div id="Div04" title="these inputs should have tabindex=4"> <p>Div 04</p> <input id="Div04Field1" type="text" value="Me tenth"/> <input id="Div04Field2" type="text" value="Me eleventh"/> <input id="Div04Field3" type="text" value="Me twelfth"/> <hr> </div> <div id="Div06" title="these inputs should have tabindex=6"> <p>Div 06</p> <input id="Div06Field1" type="text" value="Me sixteenth"/> <input id="Div06Field2" type="text" value="Me seventeenth"/> <input id="Div06Field3" type="text" value="Me eighteenth"/> </div> </div> 

Answer 1

A more flexible version of Mike's code, which sets tabIndex to the number used in id Div. It also does not require changes when changing the structure of the page.

Any div without id or with an identifier that does not match the prefix number pattern is ignored.

 <script> "use strict"; // place after </body> tag (function TabNumbers (pfx) { /* For all divs in the document with an id pfx followed by a number, set the tabIndex of all immediate children with tags of INPUT, SELECT, or BUTTON to the numeric value */ pfx = new RegExp ('^' + pfx + '(\\d+)$'); for (var divs = document.getElementsByTagName ('div'), el, m, i = divs.length; i--;) { // traverse all divs if ((m = divs[i].id.match (pfx))) { // for those with id Div# for (el = divs[i].firstChild; el; el = el.nextSibling) { // Traverse their child nodes if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'BUTTON') { el.tabIndex = +m[1]; } } } } }) ('Div'); </script> 

After some discussion, the specification was changed and the following code was adopted:

 <script> "use strict"; // place after </body> tag (function TabNumbers () { var itags = ["INPUT", "SELECT", "BUTTON"] , tags , tag , el , t , a ; while (itags.length) { for (tags = document.getElementsByTagName (itags.pop ()), t = tags.length; t--;) { el = tag = tags[t]; while ((el = el.parentNode) && el.tagName) { if (el.getAttribute && (a = el.getAttribute ('data-tindex'))) { tag.tabIndex = a; break; } } } } }) (); </script> 

Tested in Chrome

Answer 2

If the containers are Div01 , etc. can have sortable identifiers, as in your example, you can do this

jquery solution

 var groups = $('div[id^="Div"]').sort(function(a,b){ return (a.id > b.id) ? 1 : -1; }); groups.find(':input').each(function(idx){ $(this).prop('tabindex', idx+1); }); 

Demo at http://jsfiddle.net/gaby/sNekS/

---

Alternatively (and most likely more correctly), you can simply rearrange your divs so that they are correctly sorted in the source file and still appear in the left and right groups when rendering (using float:left on the inner divs) and generally not use scripts.

Demo at http://jsfiddle.net/gaby/sNekS/1/

---

Vanilla Javascript solution (after adding the group class to Div## elements and the input class to input / select elements / etc)

 var gnodes = document.getElementsByClassName('group'); // find elements with group class - non-sortable var groups = []; // create empty array to hold groups - sortable for (var i = 0, l = gnodes.length; i<l; i++){ // place elements in array so we can sort it groups.push( gnodes[i] ); } groups.sort(function(a,b){ // sort the array based on id return (a.id > b.id) ? 1 : -1; }); var counter = 1; // incremental number to define the tabindex for (var i = 0, l = groups.length; i<l; i++){ var group = groups[i], elements = group.getElementsByClassName('input'); // find all input elements of this group (must add class to all of them) for (var e = 0, len = elements.length; e < len; e++){ elements[e].setAttribute('tabindex',counter++); // set tabindex } } 

Demo at http://jsfiddle.net/gaby/sNekS/3/

Answer 3

Assuming you are using Prototype (which you probably aren't), it will look like this:

 Event.observe(window, 'dom:load', function() { var inputs = [$$('#div1 input, #div1 a'), $$('#div2 input')]; var i = 0; inputs.each(function(inputList) { inputList.each(function(input) { i++; input.tabIndex = i; }); }); }); 

Note: Unverified

Answer 4

 <script type="text/javascript"> function TabNumbers() { var t = document.getElementById('Div01').childNodes; for (i = 0; i < t.length; i++) { if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') { t[i].tabIndex = 1; } } var t = document.getElementById('Div02').childNodes; for (i = 0; i < t.length; i++) { if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') { t[i].tabIndex = 2; } } var t = document.getElementById('Div03').childNodes; for (i = 0; i < t.length; i++) { if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') { t[i].tabIndex = 3; } } var t = document.getElementById('Div04').childNodes; for (i = 0; i < t.length; i++) { if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') { t[i].tabIndex = 4; } } var t = document.getElementById('Div05').childNodes; for (i = 0; i < t.length; i++) { if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') { t[i].tabIndex = 5; } } var t = document.getElementById('Div06').childNodes; for (i = 0; i < t.length; i++) { if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') { t[i].tabIndex = 6; } } } </script>