How to allow up and down arrows to navigate your form fields

October 5th, 2008 by Robert

This post has moved to http://www.wilycode.com/how-to-allow-up-and-down-arrows-to-navigate-your-form-fields – please go there for programming tips.

Tags:

4 Responses to “How to allow up and down arrows to navigate your form fields”

  1. mhonzh says:

    hi…need a little help here not good in programming in php. how can i do that navigation though arrow keys in navigating table rows of record from database, meaning my onkeyup is on the tr.

    thanks…

  2. robert says:

    Hello there,
    I just checked and it seems like having the onkeyup on the tr element is fine since it is an “intrinsic event” (as noted at http://www.w3.org/TR/REC-html40/interact/scripts.html). So in order to make it work, each tr element needs to have a unique id. In my example, the input elements have unique ids. So when you print the records from your database, initialize a counter (like $rowCount or $index or something) to equal zero, then when you print out each row increment the counter and put the counter in the id of the tr element. Or you could just use the key of the database row like this (assuming the records are in an array called $databaseRows):

    $numRecs = count($databaseRows);
    foreach ($databaseRows as $dbKey=>$dbRow) {
      echo “<tr id = ‘”.$dbKey.”‘
        onkeyup=\”return checkKey(event,'”.$numRecs.”‘,'”.$dbKey.”‘)”
        ><td>”.$dbRow[“myDataColumnLabel”].”</td></tr>”;
    }

    The code above would need to be expanded to include all your data fields, but that’s the idea. You would also need to modify the checkKey javascript function to ignore the 3rd element (the fieldname), since you will be shifting focus on the rows, not the individual table data (td) elements.

    I’m actually not sure where the cursor would go in this case though, since you are setting the focus on a table row and not an individual data element. If it doesn’t put the cursor where you want it I recommend specifying a specific td, like in my example above.
    Regards,
    Robert

  3. Mr. Arrows says:

    This is the js code for all arrows. I needed it so I post it here.

    [code doesn’t show up well in comments so I included it in the main post -Robert]

  4. […] Pingback: How to allow up and down arrows to navigate your form fields – Good Feeling Place […]

Leave a Reply

CommentLuv badge