SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Greensboro, NC
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with form tabindex?

    This is an odd one. For some reason my forms are not following a logical tab order? I have tried forcing tabIndex and that doesn't seem to work? This is for a client so I can't show all code, but i hope I can describe it the best I can.

    Designing a AJAX & PHP based application using prototype, scriptaculous, Modalbox, some components from livepipe, and other places.

    Anyway I have this form pop up in a Modalbox (http://www.wildbit.com/labs/modalbox/)...

    HTML Code:
    <style type='text/css'>
    #scrollbar_container {
     position:relative;
     width: 935px;
    }
    #scrollbar_track {
     position:absolute;
     top:0;
     right:0;
     height:100%;
     width:15px;
    /* background-color:transparent;*/
     background-color: #9cb6da;
     border: 1px solid #369;
     cursor:move;
    }
    #scrollbar_handle {
     width:15px;
    /* background-color:#5c92e7;*/
     background-color: #036;
     cursor:n-resize;
    }
    #scrollbar_content {
     overflow:hidden;
     width:525px;
     height: 420px;
     font-size: 0.95em;
    }
    .cancelled_row {
     background-color: #fcc;
     color: #990000;
     }
    .selected_row {
     background-color: #cfc;
     color: #363;
     }
     
    .field_label {
     text-align: right;
     font-weight: bold;
     }
    #resNameLeft {
     width: 380px;
     float: left;
     text-align: left;
     border-right: 2px solid #036;
     height: 445px;
     }
     
    #resNameRight {
     width: 100%;
     }
    #resNameRightTop {
     }
     
    #cust_form td {
     padding-left: 3px;
     }
     
    #scrollbar_content a, a:link, a:visited, a:active {
     color: #036;
     }
     
    #custTabs {
     list-style: none;
     display: block;
     }
     
    #scrollbar_content ul.customer_tabs {
     list-style:none;
     margin: 0 0 5px 0;
     padding:0;
     clear:both;
     border-bottom:1px solid #369;
     height:20px;
     clear:both;
     }
    #scrollbar_content ul.customer_tabs li.tab {
     float:left;
     margin-right:3px;
     text-align:center;
     font-variant: small-caps;
     font-weight: bold;
     }
    #scrollbar_content ul.customer_tabs li.tab a {
     display:block;
     height:20px;
     padding:0 15px 0 15px;
     background-color: #AFC4E1;
     color: #036;
    /* width: 100px;*/
     text-decoration: none;
     }
    #scrollbar_content ul.customer_tabs li.tab a:hover {
     color: #000;
     }
    #scrollbar_content ul.customer_tabs li.tab a.active {
     background-color: #369;
     color: #fff;
     }
    .infoLine {
     background-color: #036;
     color: #fff;
     font-weight: bold;
     text-align: center;
     }
     
    .payments {
     font-size: 0.8em;
     }
    </style>
    <div id='scrollbar_container'>
    <div id='scrollbar_track'><div id='scrollbar_handle'></div></div>
    <div id='resNameLeft'>
    <fieldset>
    <legend>Reservation Information</legend>
    <span class='buttonBar'>
    <button id='findCustNum' name='findCustNum'>
    <img src='images/find.png' alt='' />
    Find Customer
    </button>
    <button id='saveResName' name='saveResName' class='positive'>
    <img src='images/save.png' alt='' />
    Save
    </button>
    </span>
    <div class='clear'></div>
    <table width='100%'>
    <tr>
     <td class='field_label'>First:</td>
        <td><input type='text' name='first' id='first' value='<?php echo $resname_row['first']; ?>' size='14' maxlength='14' /></td>
    </tr>
    <tr>
        <td class='field_label'>Last:</td>
        <td><input type='text' name='last' id='last' value='<?php echo $resname_row['last']; ?>' size='20' maxlength='20' /></td>
    </tr>
    <tr>
        <td class='field_label'>Home:</td>
        <td><input type='text' name='home' id='home' value='<?php echo $resname_row['home']; ?>' size='13' maxlength='13' /></td>
    </tr>
    <tr>
        <td class='field_label'>Work:</td>
        <td><input type='text' name='work' id='work' value='<?php echo $resname_row['work']; ?>' size='13' maxlength='13' /></td>
    </tr>
    <tr>
        <td class='field_label'>Fare:</td>
        <td><input type='text' name='fare' id='fare' value='<?php echo "$" . number_format($resname_row['fare'], "2", ".", ","); ?>' size='13' onKeyUp='CFMoneyFormat(this,"true");' /></td>
    </tr>
    <tr>
        <td class='field_label'>Paid:</td>
        <td><input type='text' name='paid' id='paid' value='<?php echo "$" . number_format($resname_row['paid'], "2", ".", ","); ?>' size='10' disabled='disabled' /></td>
    </tr>
    <tr>
        <td class='field_label'>Paid Date:</td>
        <td><input type='text' name='paid_date' id='paid_date' value='<?php echo $resname_row['paid_date']; ?>' size='10' disabled='disabled' /></td>
    </tr>
    <tr>
        <td class='field_label'>Customer #:</td>
        <td><input type='text' name='cust_num' id='cust_num' value='<?php echo $resname_row['cust_num']; ?>' size='13' disabled='disabled'/></td>
    </tr>
    </table>
    <input type='hidden' name='rnFormRecnum' id='rnFormRecnum' value='<?php echo $recnum; ?>' />
    </fieldset>
    </div>
    <div id='resNameRight'>
    <div id='resNameRightTop'>
    </div>
    <div id='scrollbar_content'>
    </div> <!-- scrollbar_content -->
    </div>
    </div> <!-- scrollbar_container -->
     
     
    the div resNameRight is generated dynamically and returned by AJAX.

    I have another form being returned by AJAX a long form about 49 fields.

    Looks like this:

    HTML Code:
    <table name='cust_form' id='cust_form' width='515' border='0'>
    <tr class='{$bgcolor()}'>
     <td class='right bold' width='200'>Title:&nbsp;</td>
     <td><input type='text' id='custTitle' name='custTitle' value='{$json['title']}' maxlength='4' size='4' tabIndex='10000' /></td>
    </tr>
    <tr class='{$bgcolor()}'>
     <td class='right bold'>Last:&nbsp;</td>
     <td><input type='text' id='custLast' name='custLast' value='{$json['last']}' maxlength='20' size='20' tabIndex='10001' /></td>
    </tr>
    <tr class='{$bgcolor()}'>
     <td class='right bold'>First:&nbsp;</td>
     <td><input type='text' id='custFirst' name='custFirst' value='{$json['first']}' maxlength='14' size='14' tabIndex='10002'/></td>
    </tr>
    <tr class='{$bgcolor()}'>
     <td class='right bold'>Middle Initial:&nbsp;</td>
     <td><input type='text' id='custMidInt' name='custMidInt' value='{$json['mid_int']}' maxlength='14' size='14'/></td>
    </tr>
    <tr class='{$bgcolor()}'>
     <td class='right bold'>Suffix:&nbsp;</td>
     <td><input type='text' id='custSuffix' name='custSuffix' value='{$json['suffix']}' maxlength='14' size='14'/></td>
    </tr>
    ....
    You get the picture.

    But I start off in the first field returned by AJAX the 'custTitle' field, enter my information. Hit tab... and I end up on the button 'findCustNum' that was originally on the page.

    How can I get my dynamically generated form to follow normal tabIndex where it just goes to the next field in the list, in this case the 'custLast' field.

    I have tried setting the first 3 fields tabIndex to 10000-10002 and it still goes to the 'findCustNum' button.

    Any help would be greatly appreciated. I can PM someone some more detailed code if you are willing to look at it and help me out.

    Is there anyway after my dynamic generation is done, to make the entire page recalculate tabindexes?

    Thanks!
    -David
    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
    --Rich Cook

  2. #2
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Greensboro, NC
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry I spoke too soon. It has to do with Modalbox.

    This is what fixes mine:
    Modalbox.focusableElements = this._findFocusableElements();

    Sorry for the post!
    Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
    --Rich Cook


Bookmarks

Posting Permissions

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