Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem tabbing through text inputs within table using tabindex

    I'm trying to get a form to move through the text fields in a form wherein the numbering of the fields is specified by tabindex. The prototype i'm using specified the number of the field right beside the field for testing purposes.

    The script works when there in no table incorporated, however, once i inserted the fields into a table i get an error in the line (getting a null value returned):

    obj = document.forms[0].elements[i];

    when trying to get the elements into a variable. Basically, I try to loop through all the form's text fields and see if the tab index is the next in line. using

    for (var i=0; i < document.theForm.length+1; i++)

    However, i'm not too sure if document.theForm.length gets the correct value since document.forms[0].elements[i] dosnt seem to be able to get the proper value.

    How do you get the fix the code when the input fields are within a table in order for the script to work properly?

    Thanks... the code is placed below:
    =============================

    <html>
    <head>
    <script type="text/javascript">

    function tab(current, n)
    {
    var obj = null;
    for (var i=0; i < document.theForm.length+1; i++)
    {
    obj = document.forms[0].elements[i];

    if (obj.getAttribute("tabindex") == (current.getAttribute("tabindex") + 1))
    if (current.getAttribute && current.value.length == n)
    obj.focus();
    }
    }

    </script>
    </head>

    <body>

    <form name="theForm" id="theForm">
    <table border=1>
    <tr><td>
    <input type="text" name="six" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=3> 3<br>
    </td></tr>
    <tr><td>
    <input type="text" name="five" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=5> 5<br>
    </td></tr>
    <tr><td>
    <input type="text" name="four" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=4> 4<br>
    </td></tr>
    <tr><td>
    <input type="text" name="three" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=6> 6<br>
    </td></tr>
    <tr><td>
    <input type="text" name="two" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=2> 2<br>
    </td></tr>
    <tr><td>
    <input type="text" name="one" size=4 maxlength="3" onKeyup="tab(this, 3)" tabindex=1> 1<br>
    </td></tr>
    </table>
    </form>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    is there a reason why you are using a table?

    looks to me like you can make it without the table. I mean you are still using line breaks... which is all the table is doing when starting a new <tr>.

    and forms dont like to intermingle with tables. If you do want a form within a table, put it in the table....


    <table>
    <tr>
    <td>
    <form>
    <input type=text><br>
    <input type=text><br>
    <input type=text><br>
    </form>
    </td>
    </tr>
    </table>


    as i ask above though, what is your purpose in using a table?
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •