[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

How to Click on a Button when enter pressed in Textbox using Javascript

Posted on 2008-02-02
8
Medium Priority
?
1,019 Views
Last Modified: 2010-04-21
Hi Experts,

I would like a button to be clicked on when a user presses enter in a textbox.

I'm having difficulty in determining why the following code doesn't work? Clicking on the button itself works ok, but pressing enter has no effect.

Any ideas? Thanks in advance.

Regards
Rob
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript" language="javascript">
    function checkKeys() {
        if (window.event.keyCode == 13){
            document.getElementById('Button1').click();
        }
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox_SearchTerm" runat="server" onkeypress='checkKeys();' />
        <asp:Button ID="Button1" runat="server" Text="Go" />
    </div>
    </form>
</body>
</html>
 
Code Behind:
 
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Response.Write("Button clicked")
    End Sub

Open in new window

0
Comment
Question by:rwarcup
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 19

Expert Comment

by:LordOfPorts
ID: 20805657
The ID of the button most likely changes after the form is processed. Try running in page in the brower, view its source, find the button and write down the ID that is generated. Then change the 'Button1' value in the following line of the checkKeys function

document.getElementById('Button1').click();

by updating 'Button1' to the ID generated on the client side.
0
 

Author Comment

by:rwarcup
ID: 20805719
Thanks LordOfPorts,

The html that is rendered is:

<input type="submit" name="Button1" value="Go" id="Button1" />

So I'm not sure what I'm missing. Any other ideas?

Kind Regards
Rob
0
 
LVL 15

Assisted Solution

by:NazoUK
NazoUK earned 600 total points
ID: 20805743
I got mixed results when I tried your code, sometimes it worked sometimes it didn't.
According to this article http://aspnet.4guysfromrolla.com/articles/060805-1.aspx the problem may be related to the way IE submits forms when there is only one textbox on the page, it doesn't always post the control that initiated the form submit, thus asp.net doesn't know which control event to fire. They suggest putting a 2nd textbox on the page but hidden using css. Bit of a kludge but that's IE for you I guess.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 19

Accepted Solution

by:
Limbeck earned 1400 total points
ID: 20805784
hi, please try this:

<script type="text/javascript" language="javascript">
    function checkKeys(event) {
        if (window.event.keyCode == 13){
           event.returnValue=false;
           event.cancel = true;

           document.getElementById('Button1').click(this);
      return false;
        }
    }
</script>

0
 
LVL 12

Expert Comment

by:Munawar Hussain
ID: 20805793
instead of this line
 document.getElementById('Button1').click();

you may use this one to post you page back??

document.form1.submit()

thanks
0
 
LVL 12

Expert Comment

by:Munawar Hussain
ID: 20805794
instead of this line
 document.getElementById('Button1').click();

you may use this one to post you page back??

document.form1.submit()

thanks
0
 

Author Closing Comment

by:rwarcup
ID: 31427506
Thanks Limbeck & NazoUK. Submitting fine now!
0
 
LVL 19

Expert Comment

by:Limbeck
ID: 20805822
glad to be of help :)

Ed.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
There is a wide range of advantages associated with the use of ASP.NET. This is why this programming framework is used to create excellent enterprise-class websites, technologies, and web applications.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

591 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