Solved

Enter on keyboard for Next Button

Posted on 2004-10-26
1,698 Views
Last Modified: 2012-06-21
I have a Next Button on my form. Currently I'm able to click on the mouse and it takes me to a different page.

I want to be able to hit on the Enter key on a keyboard for my Next Buttona and it will takes me to a different page. How do I do this on VS.NET environment withouth using JavaScripts. Please Help.
0
Question by:missqti
    11 Comments
     
    LVL 3

    Expert Comment

    by:nan1217
    If you just need a "Next" button and not a "Submit" button, then just create the button like normal and make it say "Next" - hitting Enter will automatically submit it and you can set your form action to the next page.

    0
     

    Author Comment

    by:missqti
    Nope, it didn't work that way. I have to force to click on the mouse first I can't use the Enter Key. Is there a work around for this?

    Here is the example of my code

    Private Sub btnNext_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnNext.Click
           
          Dim url = "http://www.Experts_Exchange"
          Response.Redirect(url)

    End Sub
    0
     
    LVL 18

    Expert Comment

    by:arantius
    In HTML, with a form, when a form element has focus and the ENTER key is pressed, the first <input type="submit"> (Or, I believe <button type="submit">) button is triggered.

    Do whatever you have to do in (*sudder*) .NET to get that tag in the HTML.
    0
     

    Author Comment

    by:missqti
    Sorry Arantius I don't understand what you are telling me.

    nan1217 I figured out the problem. Currently there is only one Next Button on the page, no text box at all. If i hit the tab key twice. It will takes me to the Next Button and I was able to hit the Enter Key.

    But my question is how do i set the focus to Next Button withouth hitting the tab key twice.


    0
     
    LVL 3

    Expert Comment

    by:nan1217
    missqti, I'm with arantius and we're trying to say the same thing in different ways.

    Whenever you define your form, you put a "submit" button in it, and when the user hits "enter" that button is submitted.  

    So, let's say your form could look like this....

    <form method="post" action="mynextpage.aspx">
    <input type="text" name="sometextbox">
    <input type=submit value="Next">
    </form>

    When the user is in the text box and hits enter, the form will submit and go to mynextpage.aspx
    0
     

    Expert Comment

    by:genXerator
    I may be wrong, but I think you have to use clientside script.  Set the body onload event to form.nextbutton.focus()

    e.g.

    <body onload="frmMain.btnNext.focus();">
    0
     

    Expert Comment

    by:genXerator
    You can also set the tabindex for the button to 0 so it will be the first form item that gets focus when you hit Tab.
    0
     
    LVL 3

    Expert Comment

    by:gnudiff

    A correct way to do it would be to assign the Enter key on the page to simulate Next button click, via event handling.

    Note that event handling is a bit tricky, as it differs among browsers, so in order for that to work on Mozilla as well as IE, you'd have to have some wrapper funcs first.

    Still here is how it works with IE:

    <script language="Javascript">

    function onKey()
    {
          if (window.event.keyCode == 13) // Enter pressed?
          {
                document.getElementById("nextbutt").click();
          }
    }

    document.attachEvent("onkeydown",onKey); // react to pressing anywhere in the page
    </script>

    ...

    <button id="nextbutt">next button</button>
    0
     

    Author Comment

    by:missqti
    genXerator: set tabindex to 0(zero) is not working for my case.

    gnudiff: I'm trying NOT to use JavaScripts. I want to use the full asp.net/vb.net for this. I'm going to try something else. Will post the answer if it works.
    0
     

    Author Comment

    by:missqti
    I found the answer myself no points to anyone right now. The points will go to whoever figure out how to set the default to the button without needing the text box there.


    Ok here is the code that work only if you have a textbox. My case I don't need a textbox and still having a problem how to figure it out.

    You DO need to write a JavaScripts for this .net application. Put the scripts in between of your head tag

    <HEAD>
         Below Script goes here....
    </HEAD>

     <script language="javascript">
        function KeyDownHandler(btn)
        {
            // process only the Enter key
            if (event.keyCode == 13)
            {
                // cancel the default submit
                event.returnValue=false;
                event.cancel = true;
                // submit the form by programmatically clicking the specified button
                btn.click();
            }
        }
    </script>

    Now, in the input controls declaration you just have to call this function when a button is pressed, by handling the onKeyPressed client-side event, and pass a reference to the default button:

    <asp:Button Runat="server" ID="DefButton" />
    <asp:TextBox Runat="server" ID="FirstName" onKeyDown= "KeyDownHandler(DefButton)" />
    0
     
    LVL 3

    Accepted Solution

    by:

    You can't control browser to that extent using server-side technology.

    Your script does exactly what I said and provided.

    You can't run it at server because the server just passes data to client and only receives it, when user specifically REQUESTs so.

    The fact that button does it at server has nothing whatsoever to do with Javascript. It still runs browser-side.

    To do it without textbox, you simply do:

    <asp:Button Runat="server" ID="DefButton" onKeyDown= "KeyDownHandler(DefButton)"/>

    and you will get basically same thing which I suggested. :P
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT Security CISA, CISSP & CISM Certification

    Master the advanced techniques required to protect network resources from external threats with the IT Cyber Security bundle. Built around industry best-practice guidelines, the IT Cyber Security bundle consists of three in-depth courses.

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Read about why website design really matters in today's demanding market.
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    846 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now