On tab press call custom function using jquery

Question

I am trying to create a simple way to insert golf scores into a database. I want to use jquery to make it nice and user friendly. I don't have to worry about anyone not having js enabled as I will be the only using it.

I have created a test page you can go to look at what i have so far here,

www.barriemenshockey.com/testing/index.php

Score Entry

Basically I have what I want when the user(me) clicks on a cell, everything works great. But I want to be able to press tab and go to the next hole, type a number hit tab again to go to the next hole and so on. Hopefully this makes sense.

Here is the JS I have so far:

<script type="text/javascript">
var tabindex = 1;

$(document).ready(function()
{
    //on click
    $("div").click(function() 
    {        
        dowork($(this));   
    });

    $().keypress(function(event)
    {
        if (event.keyCode == 9)
        {
            var temp = $("#"+tabindex);
            dowork(temp);
            $("#10").html(tabindex);   
        }
    });
});

function dowork(ob)
{
    var number = $(ob).text(); 
    $(ob).empty();
    $(ob).append($("<input size=\'2\' style=\'border: none; text-align:center;\'>"));
    $(ob).find("input").focus(); 
    var input = $(ob).find("input");      

    input.blur(function(e) 
    { 
        //return it to its last known number
        if (input.val() == "") 
            input.val(number);
        else
            tabindex++;

        //remove the input html from the div
        var last = input.val();
        $(ob).html(last); 
    });         
}
</script>

And the structure is like this:

<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>Out</td>
      </tr>
      <tr>
          <td><div id="1">&nbsp;</div></td>
          <td><div id="2">7</div></td>
          <td><div id="3">&nbsp;</div></td>
          <td><div id="4">&nbsp;</div></td>
          <td><div id="5">&nbsp;</div></td>
          <td><div id="6">&nbsp;</div></td>
          <td><div id="7">&nbsp;</div></td>
          <td><div id="8">&nbsp;</div></td>
          <td><div id="9">&nbsp;</div></td>
          <td><div id="out">0</div></td>
      </tr>
      <tr>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>In</td>
      </tr>
      <tr>
          <td><div id="10">&nbsp;</div></td>
          <td><div id="11">&nbsp;</div></td>
          <td><div id="12">&nbsp;</div></td>
          <td><div id="13">&nbsp;</div></td>
          <td><div id="14">&nbsp;</div></td>
          <td><div id="15">&nbsp;</div></td>
          <td><div id="16">&nbsp;</div></td>
          <td><div id="17">&nbsp;</div></td>
          <td><div id="18">&nbsp;</div></td> 
          <td><div id="in">0</div></td>
      </tr>
      <tr>
          <td colspan="9">&nbsp;</td>
          <td><div id="total">0</div></td>
      </tr>
  </table>

Thanks for the help.

Nick

Answer 1

Hi Nick,

You could use the .blur jquery event to hook into when the text box loses focus. This would work regardless of whether you tab, click, etc.

In terms of the tab, you can specify tab order in the input tag, such as:

<input id="hole1" tabindex="1" />
<input id="hole2" tabindex="2" />
....

This will control where the cursor goes when the user tabs. Combine the two ideas above and you should be good to go..

Answer 2

The events attached to input need to be attached via jQuery's live() function, since your inputs are dynamically added to the dom.

http://api.jquery.com/live/

EDIT: Here's a working solution for you.

$("div").click(function() {
            $div = $(this)
            var number = $div.text();
            $div.empty();
            $div.append("<input size=\'2\' style=\'border: none; text-align:center;\'>");
            $div.find('input').focus().val(number);
        });

        $('input').live('keydown',function(event) {
            var keycode = event.keyCode;
            if (keycode == 9) {
                var $div = $(this).parent();
                var nextID = parseInt($div.attr('id')) + 1;
                $div.html($(this).val());
                $('#' + nextID).click();
                event.preventDefault();
            }   
        });

Answer 3

have you tried adding an

event.preventDefault(); 

in here:

if (event.keyCode == 9)
        {
            event.preventDefault();
            var temp = $("#"+tabindex);
            dowork(temp);
            $("#10").html(tabindex);   
        }