CODEWITHSUNDEEP
javascriptasp.netvb.net
Nice Guy
Nice Guy

Reputation: 41

How to use enter to move cursor to next textbox instead of submit?

screenshot I'm trying to move the cursor to the next textbox by pressing Enter.

Here is my aspx code:

<strong>
                    <asp:Label ID="bondtapelbl" runat="server" Text="Bond Tape :" Font-Bold="True" Font-Italic="False" Font-Names="Arial Black" Font-Size="Medium"></asp:Label>
                </strong>
                <asp:TextBox ID="bondtape" runat="server" BackColor="#CCCCCC" Height="35px" Font-Size="Medium" Width="130px" CssClass="bt" />

                &nbsp;<span class="auto-style6">&amp;</span><strong>
                    <asp:Label ID="productranklbl" runat="server" Text="Product Rank :" Font-Bold="True" Font-Italic="False" Font-Names="Arial Black" Font-Size="Medium"></asp:Label>

                    <asp:TextBox ID="productrank" runat="server" BackColor="#CCCCCC" Height="35px" Font-Size="Medium" Width="130px" CssClass="pr" />

                    <asp:Button ID="bontapeButton" Text="Search" runat="server" BackColor="#3399FF" BorderStyle="None" CssClass="btsearch" ForeColor="White" Height="39px" Width="80px" />
                </strong></td>

I'm using javascript for this. The problem is that instead of moving the cursor to the next text box, it automatically execute the search button.

   <script type="text/javascript">

                //Bind keyup event to textbox
                $('btsearch[type="bondtape"]').keyup(function (event) {
                    if (e.keyCode == 13) {
                        $("pr").next().focus();
                    }
                });

            </script>

My javascript is based on this answer that I got from the other forum:

$('input[type="textbox"]').keyup(function(e) {
if(e.keyCode == 13) {
    $(this).next().focus();
}});

I've only learnt javascript for 2/3 days so I don't really know in which part I'm wrong. I would be grateful if anyone could help me. Thanks in advance.

Upvotes: 0

Views: 2356

Answers (1)

Nice Guy
Nice Guy

Reputation: 41

okay I just want to share the answer that I got. Here is the link that I got my answer from(you can also try the demo) : http://www.latentmotion.com/downloads/enter-to-tab.html
and below is the javascript that work with my project. The solution that I got is I replaced my javascript on the question with the javascript below. I hope this could help other people .

 $(document).ready(function(){
        $("input").not( $(":button") ).keypress(function (evt) {
            if (evt.keyCode == 13) {
                iname = $(this).val();
                if (iname !== 'Submit'){    
                    var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
                    var index = fields.index( this );
                    if ( index > -1 && ( index + 1 ) < fields.length ) {
                        fields.eq( index + 1 ).focus();
                    }
                    return false;
                }
            }
        });
    });

Upvotes: 1

Related Questions