Home/ Questions/Q 6608627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:37:47+00:00

I have a jquery dialog that pops up with a form. The form is

  • 0

I have a jquery dialog that pops up with a form. The form is split across multiple tabs within the dialog. I’m working on keyboard ease and would like for pushing the tab key on the last element of one tab to take me to the first element of the next tab. Right now the tab order is to go through the dialog tabs, then through the first tab of inputs, then to the OK button. Instead of Weight->OK I want it to go Weight->Price. Is there an easy way to do this?

The HTML:

<div id='add_dialog' title='Add'>
    <form id="add_form" method="POST">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="ProductId" value="2">
        <div id="jquery-ui-tabs">
            <ul>
                <li><a href="#add_details">Details</a></li>
                <li><a href="#add_financial">Financial & Comments</a></li>
            </ul>

            <div id="add_details">                  
                Quantity: <input type="text" name="Quantity" value="1"><br />
                QuantityPerPack: <input type="text" name="QuantityPerPack" value="0"><br />
                Pc Weight: <input type="text" name="PieceWeight" value=" "><br />
            </div>
            <div id="add_financial">
                Price: <input type="text" name="PriceHigh" value="0.00"><br />
                Comment: <textarea name="StockComment"></textarea><br />
            </div>
        </div>
    </form>
</div>

And the initializing javascript:

$('#add_dialog').dialog(
        { 
            autoOpen: false,
            maxHeight: 500,
            width: 600,
            minWidth: 600,
            zIndex: 99999,
            position: ['center', 50],
            buttons:[{
                text: "Ok",
                class: "dialog_ok",
                click: function() {
                $(this).dialog("close"); 
                    $("#add_form").submit();
                    }
                },
                {
                text: "Cancel",
                class: "dialog_cancel",
                click: function() {
                    $(this).dialog("close"); 
                }
            }]          
        });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is happening because the other form inputs are hidden in a hidden tab div, and thus skipped over for tabbing through. So you have to manually listen for someone pressing tab and then show the other tab.

    On “weight” input, bind to keydown. Look at the key they pressed in the event that your lister gets. If someone pressed “tab”, select the add_financial href and send it a “click” event to get it to change to the next tab, then select the “price” input and focus() on it.

    • 0