set Focus to next form element blindly

1,584 Recognized Expert Top Contributor

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>

Dec 23 '07 #1

Subscribe Reply

3410

mplungjan

New Member

To focus the last element in the form:

Longhand:

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

Dec 26 '07 #2

dlite922

1,584

Recognized Expert Top Contributor

To focus the last element in the form:

Longhand:

document.forms[0].elements[document.forms[0].elements.lengt h-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

Similar topics

1789

focus/tab question

by: yabba | last post by:

I am building an asp form with various elements... <td tabindex=>blablabla</td> Where the is the order I want, so far so good and using the tab key provides the desired results however... When I *click* on one of the elements the tab order is not updated and so the next tab key jumps to wherever tabbing left off.

ASP / Active Server Pages

1811

Problem with focus()

by: CharlesTheHawk | last post by:

I thought this would be really simple, but i'm stumped. I'd like to validate some data without submitting the form, but i can't seem to get the focus to go back to the field with the bad data. I've stripped out most of the code just to illustrate the problem. In both IE and Mozilla, the focus still goes to the next element. This is .php generated. <html><body><script type="text/javascript"> var numAdults=5; var numChildren=0; function...

Javascript

1414

focus/select methods (form larger than screen)

by: Tim Johnson | last post by:

Howdy: I'm just learning how to use focus() and select(). I have a very large form (360+ elements). Javascript validation is launched by the 'onclick' event handler in the "submit" button tag. Problem: When the element to be validated is not on the screen - since the form is larger than the screen, then there are no visual cues to help

Javascript

2113

[Windows 98] Browser Control Focus Issue.

by: Vinod. | last post by:

Hi all, I have added browser control to a windows form. I am loading pages having multiple frames. I have noticed that the focus in a text is not maintained when the application is deactivated. I fixed this issue by finding the active element in dom and then setting its focus. If the active element is a frameelement then I get the document of the frameelement and then get the activeelement of that document and set the focus. This works...

C# / C Sharp

2404

Tab and focus

by: fidodido | last post by:

If in the textarea (textarea3), the value is not "abc", and the user uses "Tab" to go to the next textarea (textarea4), it will alert an error message...and the focus will return to the textarea (textarea3) again... It works in Internet Explorer, however in firefox it does not work? Anyway have any ideas why & how? Here is the source, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Javascript

2288

Losing focus on a slider control within a user control

by: Israel | last post by:

The problem: I want to know, definitively when a slider loses focus after a user has started sliding and hasn't released the mouse yet. It appears that this is captured with the WM_ACTIVATEAPP message but this only goes to the form and I want it in the user control that maybe very much removed from the form's knowledge; i.e. the form may launch a 3rd party form that, upon a call back, decides to launch other form that has my user control...

.NET Framework

55316

changing focus to next input element

by: yawnmoth | last post by:

Say I have two input elements and that I wanted to make it so that when the first ones input was what it should be, the focus would automatically be shifted to the next input element. ie. something like... <input onkeyup="if (this.value.length == this.maxlength) document.forms.elements.focus()" value="whatever" maxvalue="x" type="text" /> <input value="whatever" maxvalue="x" type="text" />

Javascript

2100

Controls Lose Focus When You Enable SmartNavigation and AutoPostBack

by: danyeungw | last post by:

I get the following from the link http://support.microsoft.com/kb/314206. I need to have both work - the page stays where it is and set focus to next control. Does anyone have solution? I have been working on this for days. I am using ASP.NET 2003. Thanks. DanYeung PRB: Controls Lose Focus When You Enable SmartNavigation and AutoPostBack View products that this article applies to. Article ID : 314206 Last Review : February 23,...

.NET Framework

2214

window.focus() brings source code into focus

by: Spizzat2 | last post by:

I'm trying to figure out a workaround to a minor annoyance that I'm coming up with while coding a site. I've got some keyboard shortcuts set up for the site via javascript, and when I press escape, it's set to hide several divs on the page, and remove focus from a link. Unfortunately, I don't know which link will have focus, so I can't just blur a particular element (that I'm aware of) since I won't know which element it is. I got it...

Javascript

8392

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8305

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8732

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8605

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7324

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6163

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5632

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4151

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

1953

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP