CODEWITHSUNDEEP
javascript
neha
neha

Reputation: 63

unable to set focus on textboxes using javascript

I am trying to set focus on textboxes 1 by 1 on tab press but its not working for me.

here is code that i have tried:

function showstep2() {
    document.getElementById('step2').style.visibility = 'visible'
    document.getElementById('prevOrdQuan').focus();
}

function showstep3() {
    document.getElementById('step3').style.visibility = 'visible';
    document.getElementById('takeOutAmt').focus();
}    

function showstep4() {
    document.getElementById('step4').style.visibility = 'visible';
    document.getElementById('compsPerWeek').focus();
}

HTML:

<table style="width: 100%;" align="left">
    <tbody>
        <tr>
            <td>How many TakeOut Orders do You do each week?</td>
            <td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();"  /></td>
        </tr>
    </tbody>
</table>

<table id="step2"  style="width: 100%;  visibility: hidden;"  align="left">
    <tbody>
        <tr>
            <td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
            <td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
        </tr>
    </tbody>
</table>

<table id="step3" style="width: 100%; visibility: hidden;" align="left">
    <tbody>
        <tr>
            <td>How Much Is Your Average Takeout Order?</td>
            <td><input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
        </tr>
    </tbody>
</table>

There are 3 textboxes,for 1st textbox i have set focus on load like this:

 function setFocus() {
    document.getElementById("prevOrdQuan").focus();
}

It sets the focus for 1st textbox.after pressing tab on 1st textbox it displays 2nd textbox but focus is not set on second textbox.

This is only the problem that i need to resolve.

Upvotes: 1

Views: 657

Answers (1)

Simon Fischer
Simon Fischer

Reputation: 1208

You have a problem in the showstep2 function, you are focussing the element with the id prevOrdQuan which is the first text box. I think you wanted to focus newOrdQuan.

So change 

document.getElementById('prevOrdQuan').focus();

to

document.getElementById('newOrdQuan').focus();

And it should work.

EDIT

You also need anything focusable below your text boxes (an additional input etc). Otherwise if you press tab on the first (and only) textbox, the browser focusses the address bar and thus firing the onblur event on both next textboxes and displaying both at the same time. Here is an example of what I mean: http://jsfiddle.net/24TK4/1/

2nd EDIT

I think this is an elegant solution of the problem: http://jsfiddle.net/24TK4/2/

Look at the link at the and of the HTML code, it just displays an invisible link.

Upvotes: 1

Related Questions