By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,147 Members | 744 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,147 IT Pros & Developers. It's quick & easy.

set Focus to next form element blindly

dlite922
Expert 100+
P: 1,584
Before traversing my code, here's what my goal is and what this function does:

I have a table of fields that dynamically grows as the user enters information. A minimum of 3 rows must always exist. (read the psedo code and comment if you need to know what it does)

disregard the debugging , commented alerts.

What i'm trying to do is without passing the ID or field that called this function, set the focus to the next element. what's happening right now is that when this function is called with onBlur, the focus is not returned to any fields so the user must press tab or click on the next field.

is there a document event or some thing that lets me know where the focus is (or tab index) and move it the next. The new cells being created do not set the tabIndex property, but i'll do this as soon as i know of a method that allows me to traver this form.

thanks in advance, here's the code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <script language="javascript" type="text/javascript">
  8.  
  9.     // Last updated 12/22/2007
  10.  
  11.     /* Psedocode
  12.  
  13.     On blur of ANY field of ANY row do: 
  14.  
  15.         if number of rows is greater than 3
  16.             Traverse each row 
  17.  
  18.                 if every field in that row is empty
  19.  
  20.                     delete that row
  21.  
  22.                     decrese violationsection body by 35. 
  23.  
  24.  
  25.             add two blank rows at end of table
  26.  
  27.             and increment violation section body by 35 
  28.  
  29.     */
  30.  
  31.  
  32.  
  33.     function organizeTable()
  34.     {
  35.         // TO DO: 
  36.         // 1. combine the empty row collection and deletion into one so that it does not mess up the row position (ie start deleteing from bottom)
  37.         //    assign variables
  38.         // 2. adjust the parent height of the element of the element to accomodate the new number of rows. 
  39.  
  40.  
  41.         var tbl = document.getElementById('testTable');
  42.         var numRows = tbl.rows.length-1; // to ommit header. 
  43.         var rowsToDelete = new Array(); // contains the rows that are empty
  44.         var minRows = 3;                 // number of minimum rows to display at all times.
  45.  
  46.         // collect all the empty rows, cannot delete here because it will affect the rows
  47.         //
  48.         for (i = 1; i <= numRows; i++) 
  49.         {
  50.             //alert("i is " + i);
  51.             var textRow = document.getElementById('txtRow' + i);
  52.             var selectRow = document.getElementById('selRow' + i);
  53.  
  54.             //alert("Looking at txtRow"+ i + " which is " + textRow + " and selRow"+ i + " which is " + selectRow);
  55.             if (textRow.value.length <= 0 && selectRow.options[selectRow.selectedIndex].value.length <= 0)
  56.             {
  57.                 //alert("Number to delete " + i);
  58.                 rowsToDelete.push(i);
  59.             }
  60.             //alert("continueing...");
  61.         }
  62.  
  63.         //alert("finished for loop, deleting rows...");
  64.  
  65.         //alert("total rows to delete " + rowsToDelete.length);
  66.  
  67.         // delete the empty rows
  68.         for (i = 0; i < rowsToDelete.length; i++)
  69.         {
  70.             //alert("i = " + i);
  71.             //alert("Deleting Row Number: " + rowsToDelete[i]);
  72.  
  73.             tbl.deleteRow(rowsToDelete[i]-i);
  74.         }
  75.  
  76.         // get the new total of rows after deletion
  77.         numRows = numRows - rowsToDelete.length;
  78.  
  79.         //alert("Number of rows are now " + numRows);
  80.  
  81.         //if total rows less than minRows, add rows to get to that minimum, but insert atleast one row at the end. 
  82.  
  83.         do {
  84.  
  85.             // increase the total rows of the table; 
  86.             numRows++;
  87.  
  88.             //alert("building row number" + (numRows));
  89.             var row = tbl.insertRow(numRows);  // insert the new row
  90.  
  91.             // create textbox element
  92.             var c1 = row.insertCell(0); // insert new cell at that row
  93.             var e1 = document.createElement('input');
  94.             e1.type = 'text';
  95.             e1.name = 'txtRow' + numRows;
  96.             e1.id = 'txtRow' + numRows;
  97.             e1.value = "";
  98.             e1.size = 40;
  99.             e1.onblur = organizeTable;
  100.             c1.appendChild(e1); // add element to the cell. 
  101.  
  102.             // create drop down element
  103.             var c2 = row.insertCell(1); // insert new cell at that row
  104.             var e2 = document.createElement('select');
  105.             e2.name = 'selRow' + numRows;
  106.             e2.id = 'selRow' + numRows;
  107.             e2.options[0] = new Option('', '');
  108.             e2.options[1] = new Option('A Value', 'value1');
  109.             e2.options[2] = new Option('2 Value', 'value2');
  110.             e2.options[3] = new Option('3 Value', 'value2');
  111.             e2.onblur = organizeTable;
  112.             c2.appendChild(e2); // add element to the cell. 
  113.  
  114.         } 
  115.         while (numRows < minRows);
  116.  
  117.  
  118.  
  119.         return;     
  120.     }
  121.  
  122. </script>
  123. </head>
  124. <body>
  125.  
  126. <table border="1" id="testTable">
  127.   <tr>
  128.     <th colspan="3">Test table</th>
  129.   </tr>
  130.   <tr>
  131.     <td>
  132.         <input type="text" name="txtRow1" id="txtRow1" value="" size="40" onblur="organizeTable();" tabindex="1" />
  133.     </td>
  134.     <td>
  135.         <select name="selRow1" id="selRow1" onblur="organizeTable();" tabindex="2">
  136.             <option value="" selected="selected"></option>
  137.             <option value="value1">A Value</option>
  138.             <option value="value2">2 Value</option>
  139.             <option value="value3">3 Value</option>
  140.         </select>
  141.     </td>
  142.   </tr>
  143.   <tr>
  144.     <td>
  145.         <input type="text" name="txtRow2" id="txtRow2" value="" size="40" onblur="organizeTable();" tabindex="3" />
  146.     </td>
  147.     <td>
  148.         <select name="selRow2" id="selRow2" onblur="organizeTable();" tabindex="4">
  149.             <option value="" selected="selected"></option>
  150.             <option value="value1">A Value</option>
  151.             <option value="value2">2 Value</option>
  152.             <option value="value3">3 Value</option>
  153.         </select>
  154.     </td>
  155.   </tr>
  156.   <tr>
  157.     <td>
  158.         <input type="text" name="txtRow3" id="txtRow3" value="" size="40" onblur="organizeTable();" tabindex="5" />
  159.     </td>
  160.     <td>
  161.         <select name="selRow3" id="selRow3" onblur="organizeTable();" tabindex="6">
  162.             <option value="" selected="selected"></option>
  163.             <option value="value1">A Value</option>
  164.             <option value="value2">2 Value</option>
  165.             <option value="value3">3 Value</option>
  166.         </select>
  167.     </td>
  168.   </tr>
  169. </table>
  170. </body>
  171. </html>
  172.  
  173.  
  174.  
Dec 23 '07 #1
Share this Question
Share on Google+
2 Replies


P: 13
To focus the last element in the form:

Longhand:

document.forms[0].elements[document.forms[0].elements.length-1].focus();
Dec 26 '07 #2

dlite922
Expert 100+
P: 1,584
To focus the last element in the form:

Longhand:

document.forms[0].elements[document.forms[0].elements.length-1].focus();
thanks!

I get the idea, but not sure how i can put it into my solution. I'll post back if i can't get it to work.
Jan 21 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.