set Focus to next form element blindly

dlite922

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

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script language="javascript" type="text/javascript">
 
    // Last updated 12/22/2007
 
    /* Psedocode
 
    On blur of ANY field of ANY row do: 
 
        if number of rows is greater than 3

            Traverse each row 
 
                if every field in that row is empty
 
                    delete that row
 
                    decrese violationsection body by 35. 
 
            add two blank rows at end of table
 
            and increment violation section body by 35 
 
    */
 
    function organizeTable()

    {

        // TO DO: 

        // 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)

        //    assign variables

        // 2. adjust the parent height of the element of the element to accomodate the new number of rows. 
 
        var tbl = document.getElementById('testTable');

        var numRows = tbl.rows.length-1; // to ommit header. 

        var rowsToDelete = new Array(); // contains the rows that are empty

        var minRows = 3;                 // number of minimum rows to display at all times.
 
        // collect all the empty rows, cannot delete here because it will affect the rows

        //

        for (i = 1; i <= numRows; i++) 

        {

            //alert("i is " + i);

            var textRow = document.getElementById('txtRow' + i);

            var selectRow = document.getElementById('selRow' + i);
 
            //alert("Looking at txtRow"+ i + " which is " + textRow + " and selRow"+ i + " which is " + selectRow);

            if (textRow.value.length <= 0 && selectRow.options[selectRow.selectedIndex].value.length <= 0)

            {

                //alert("Number to delete " + i);

                rowsToDelete.push(i);

            }

            //alert("continueing...");

        }
 
        //alert("finished for loop, deleting rows...");
 
        //alert("total rows to delete " + rowsToDelete.length);
 
        // delete the empty rows

        for (i = 0; i < rowsToDelete.length; i++)

        {

            //alert("i = " + i);

            //alert("Deleting Row Number: " + rowsToDelete[i]);
 
            tbl.deleteRow(rowsToDelete[i]-i);

        }
 
        // get the new total of rows after deletion

        numRows = numRows - rowsToDelete.length;
 
        //alert("Number of rows are now " + numRows);
 
        //if total rows less than minRows, add rows to get to that minimum, but insert atleast one row at the end. 
 
        do {
 
            // increase the total rows of the table; 

            numRows++;
 
            //alert("building row number" + (numRows));

            var row = tbl.insertRow(numRows);  // insert the new row
 
            // create textbox element

            var c1 = row.insertCell(0); // insert new cell at that row

            var e1 = document.createElement('input');

            e1.type = 'text';

            e1.name = 'txtRow' + numRows;

            e1.id = 'txtRow' + numRows;

            e1.value = "";

            e1.size = 40;

            e1.onblur = organizeTable;

            c1.appendChild(e1); // add element to the cell. 
 
            // create drop down element

            var c2 = row.insertCell(1); // insert new cell at that row

            var e2 = document.createElement('select');

            e2.name = 'selRow' + numRows;

            e2.id = 'selRow' + numRows;

            e2.options[0] = new Option('', '');

            e2.options[1] = new Option('A Value', 'value1');

            e2.options[2] = new Option('2 Value', 'value2');

            e2.options[3] = new Option('3 Value', 'value2');

            e2.onblur = organizeTable;

            c2.appendChild(e2); // add element to the cell. 
 
        } 

        while (numRows < minRows);
 
        return;     

    }
 
</script>

</head>

<body>
 
<table border="1" id="testTable">

  <tr>

    <th colspan="3">Test table</th>

  </tr>

  <tr>

    <td>

        <input type="text" name="txtRow1" id="txtRow1" value="" size="40" onblur="organizeTable();" tabindex="1" />

    </td>

    <td>

        <select name="selRow1" id="selRow1" onblur="organizeTable();" tabindex="2">

            <option value="" selected="selected"></option>

            <option value="value1">A Value</option>

            <option value="value2">2 Value</option>

            <option value="value3">3 Value</option>

        </select>

    </td>

  </tr>

  <tr>

    <td>

        <input type="text" name="txtRow2" id="txtRow2" value="" size="40" onblur="organizeTable();" tabindex="3" />

    </td>

    <td>

        <select name="selRow2" id="selRow2" onblur="organizeTable();" tabindex="4">

            <option value="" selected="selected"></option>

            <option value="value1">A Value</option>

            <option value="value2">2 Value</option>

            <option value="value3">3 Value</option>

        </select>

    </td>

  </tr>

  <tr>

    <td>

        <input type="text" name="txtRow3" id="txtRow3" value="" size="40" onblur="organizeTable();" tabindex="5" />

    </td>

    <td>

        <select name="selRow3" id="selRow3" onblur="organizeTable();" tabindex="6">

            <option value="" selected="selected"></option>

            <option value="value1">A Value</option>

            <option value="value2">2 Value</option>

            <option value="value3">3 Value</option>

        </select>

    </td>

  </tr>

</table>

</body>

</html>

mplungjan

To focus the last element in the form:

Longhand:

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

dlite922

Quote:

Originally Posted by mplungjan

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.

set Focus to next form element blindly

re: set Focus to next form element blindly

re: set Focus to next form element blindly

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about