Question

I am trying to write a script on a form that searches within the HTML for a DD tag. When it finds the tag I want to detect whether the first child contained in the DD tag is an input box or select box and if it to set the focus to it. There could potentially be more than DD tag on one page so I am only concerned with the first instance of it.

Essentially, what I am trying to do is when the page loads, it focuses on the first form field on the page so that the user can enter data directly without the need to click on a box or dropdown. I need he logic to be written in pure JS (so not JQuery solutions please) and to accommodate if a given page might have an input box as the first field or a select box as the first field.

JSFiddle: http://jsfiddle.net/3UqSq/

Any help would be great!

The HTML for input box:

  <div class="container">
     <form class="myform">
       <fieldset>
          <dl>
            <dt><label for="input1">Label 1</label></dt>
            <dd>
               <input id="input1" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
            <dt><label for="input2">Label 2</label></dt>
            <dd>
               <input id="input2" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
         </dl>
       </fieldset>
     </form>
   </div>

The HTML for select box:

  <div class="container">
     <form class="myform">
       <fieldset>
          <dl>
            <dt><label for="input1">Label 1</label></dt>
            <dd>
               <select id="input1">
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
               </select>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
            <dt><label for="input2">Label 2</label></dt>
            <dd>
               <input id="input2" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
         </dl>
       </fieldset>
     </form>
   </div>

Answer 1

Include this in a script at the bottom of your page or after load:

​var dd = document.getElementsByTagName('dd')[0];

if (dd.children[0].tagName.toLowerCase() == 'select' ||
    dd.children[0].tagName.toLowerCase() == 'input') {
    dd.children[0].focus();
}

See demo