468,556 Members | 2,192 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,556 developers. It's quick & easy.

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

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
1 6241
shweta123
692 Expert 512MB
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.

Similar topics

reply views Thread by Miquel | last post: by
1 post views Thread by Raghuvansh | last post: by
5 posts views Thread by Steve | last post: by
2 posts views Thread by Lenard Gunda | last post: by
2 posts views Thread by Lenster | last post: by
3 posts views Thread by graphicsxp | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.