CODEWITHSUNDEEP
javascripthtml
gordon613
gordon613

Reputation: 2952

Tabbing to an element which is not yet visible in HTML

I have a table with three rows. Each row has a label and a text-box. The second row is initially hidden.

The code below will make the second row visible if the number in the first text box is more than one.

However, if one enters a number in the first box, and presses TAB, then the cursor is moved to the third text box - because the second text box is not yet visible.

Is there a neat way of getting the cursor to TAB to the second text box, in the event that the second row will be made visible?

Thanks

<SCRIPT>
function changePrinciplePayments(aVal) {
    if (aVal > 1) {
        $('#paymentFrequency').show();
    } else {
        $('#paymentFrequency').hide();
    }
}
</SCRIPT>



 <table>
    <tr class="Blocks">
            <td>Number of Payments:</td>

        <td><input class="Form80" id="numPrincipalPayments" onblur=
        "changePrinciplePayments(this.value);" tabindex="18" type=
        "text"></td>
    </tr>

    <tr class="Blocks" id="paymentFrequency" style="display:none;">
        <td>Payment Frequency:</td>

        <td><input tabindex="19" type="text"></td>
    </tr>

    <tr class="Blocks" id="paymentType">
        <td>payment Type:</td>

        <td><input tabindex="20" type="text"></td>
    </tr>
</table>

Upvotes: 1

Views: 440

Answers (1)

Jimmy Knoot
Jimmy Knoot

Reputation: 2388

It is because of your tabindex, change it to the normal order. If a textfield is not displayed, it will be skipped in the order of tabs, so when it is not hidden, it will not be skipped.

Example of your table:

<table>
    <tr class="Blocks">
        <td>Number of Payments:</td>
        <td>
            <input class="Form80" id="numPrincipalPayments" onblur="changePrinciplePayments(this.value);" tabindex="18" type="text">
        </td>
    </tr>
    <tr class="Blocks" id="paymentFrequency" style="display:none;">
        <td>Payment Frequency:</td>
        <td>
            <input tabindex="19" type="text">
        </td>
    </tr>
    <tr class="Blocks">
        <td>Number of Payments:</td>
        <td>
            <input class="Form80" id="someId" tabindex="20" type="text">
        </td>
    </tr>
</table>

Tested this in Google Chrome and it is working as you would expect.

EDIT

You want to focus to the second input on the event the second input is made visible, you can achieve this quite simply by setting the focus to the input. You do this by editing your function to something like this:

function changePrinciplePayments(aVal) {
    var element = $('#paymentFrequency');
    if (aVal > 1) {
        element.show();
        element.find('input').focus();
    } else {
        element.hide();
    }
}

EDIT 2

You can even do this in a better way by not listening to onblur, but on onchange, it would then look something like this:

Your row:

<tr class="Blocks">
    <td>Number of Payments:</td>
    <td>
        <input class="Form80" id="numPrincipalPayments" onchange="changePrinciplePayments(this.value);" tabindex="18" type="text">
    </td>
</tr>

Your function:

function changePrinciplePayments(aVal) {
    var element = $('#paymentFrequency');
    if( !$.isNumeric(aVal) ) {
        element.hide();            
        return true;
    }

    if (aVal > 1) {
        element.show();
        element.find('input').focus();
    } else {
        element.hide();
    }

    return true;
}

Upvotes: 2

Related Questions