By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,635 Members | 2,174 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,635 IT Pros & Developers. It's quick & easy.

Wrong button.click function is trigger when press Enter key on textbox

P: 18
I tried to use javascript to trigger up the button click function when user press enter key from the textbox. This function work fine with a single button click such has login page. However, if the page has multiple button such login page with a search function somewhere around, then it's not respond properly. I have attached a brief example of two text boxes and two button. When ever a key is press on textbox one, I want to trigger button1.click, and press on text box 2 to trigger button2.click. The id and button is correct from the alert but i don't know why it keep calling button1.click event when I press on textbox 2.

<script type="text/javascript">

//Handle enter key press to trigger button click
function focusNext(objEvent, strElement)
{
if ( objEvent.keyCode == 13)
{
oNextObj = document.getElementById(strElement);
alert("Enter key is pressed!!");
if( oNextObj ) {
oNextObj.focus();
// alert("Focused on Object and before click() trigger");
oNextObj.click();
alert("processed clicked on ID: " + strElement + " Value: " + oNextObj.value);

} //end if

return;

} //end if

} //end function

</script>
.
.
.
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="True"></asp:Label><br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button 1" /><br />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button 2" /></div>
</form>
</body>

-- vb code


Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.Label1.Text = "Text will display here<br>Click on the text box then press enter key to see change"
Me.TextBox1.Text = "Textbox 1"
Me.TextBox2.Text = "Textbox 2"

Me.TextBox1.Attributes.Add("onkeydown", "javascript:focusNext(event,'" & Me.Button1.ClientID & "')")
Me.TextBox2.Attributes.Add("onkeydown", "javascript:focusNext(event,'" & Me.Button2.ClientID & "')")
End Sub


Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
Me.Label1.Text = "Enter key is pressed from Textbox 2"
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Me.Label1.Text = "Enter key is pressed from Textbox 1"
End Sub

End Class
Apr 7 '08 #1
Share this Question
Share on Google+
1 Reply


shweta123
Expert 100+
P: 692
Hi,

May be you are sending the wrong Id for button while calling javascript function. You can try using ID instead of ClientID.
e.g

Me.TextBox2.Attributes.Add("onkeydown", "javascript:focusNext(event,'" & Me.Button2.ID & "')")



I tried to use javascript to trigger up the button click function when user press enter key from the textbox. This function work fine with a single button click such has login page. However, if the page has multiple button such login page with a search function somewhere around, then it's not respond properly. I have attached a brief example of two text boxes and two button. When ever a key is press on textbox one, I want to trigger button1.click, and press on text box 2 to trigger button2.click. The id and button is correct from the alert but i don't know why it keep calling button1.click event when I press on textbox 2.

<script type="text/javascript">

//Handle enter key press to trigger button click
function focusNext(objEvent, strElement)
{
if ( objEvent.keyCode == 13)
{
oNextObj = document.getElementById(strElement);
alert("Enter key is pressed!!");
if( oNextObj ) {
oNextObj.focus();
// alert("Focused on Object and before click() trigger");
oNextObj.click();
alert("processed clicked on ID: " + strElement + " Value: " + oNextObj.value);

} //end if

return;

} //end if

} //end function

</script>
.
.
.
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="True"></asp:Label><br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button 1" /><br />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button 2" /></div>
</form>
</body>

-- vb code


Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.Label1.Text = "Text will display here<br>Click on the text box then press enter key to see change"
Me.TextBox1.Text = "Textbox 1"
Me.TextBox2.Text = "Textbox 2"

Me.TextBox1.Attributes.Add("onkeydown", "javascript:focusNext(event,'" & Me.Button1.ClientID & "')")
Me.TextBox2.Attributes.Add("onkeydown", "javascript:focusNext(event,'" & Me.Button2.ClientID & "')")
End Sub


Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
Me.Label1.Text = "Enter key is pressed from Textbox 2"
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Me.Label1.Text = "Enter key is pressed from Textbox 1"
End Sub

End Class
Apr 7 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.