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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • daonho
    New Member
    • Apr 2008
    • 18

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

    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(objEv ent, strElement)
    {
    if ( objEvent.keyCod e == 13)
    {
    oNextObj = document.getEle mentById(strEle ment);
    alert("Enter key is pressed!!");
    if( oNextObj ) {
    oNextObj.focus( );
    // alert("Focused on Object and before click() trigger");
    oNextObj.click( );
    alert("processe d 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.P age

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArg s) 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.Tex t = "Textbox 1"
    Me.TextBox2.Tex t = "Textbox 2"

    Me.TextBox1.Att ributes.Add("on keydown", "javascript:foc usNext(event,'" & Me.Button1.Clie ntID & "')")
    Me.TextBox2.Att ributes.Add("on keydown", "javascript:foc usNext(event,'" & Me.Button2.Clie ntID & "')")
    End Sub


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

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

    End Class
  • shweta123
    Recognized Expert Contributor
    • Nov 2006
    • 692

    #2
    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.Att ributes.Add("on keydown", "javascript:foc usNext(event,'" & Me.Button2.ID & "')")



    Originally posted by daonho
    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(objEv ent, strElement)
    {
    if ( objEvent.keyCod e == 13)
    {
    oNextObj = document.getEle mentById(strEle ment);
    alert("Enter key is pressed!!");
    if( oNextObj ) {
    oNextObj.focus( );
    // alert("Focused on Object and before click() trigger");
    oNextObj.click( );
    alert("processe d 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.P age

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArg s) 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.Tex t = "Textbox 1"
    Me.TextBox2.Tex t = "Textbox 2"

    Me.TextBox1.Att ributes.Add("on keydown", "javascript:foc usNext(event,'" & Me.Button1.Clie ntID & "')")
    Me.TextBox2.Att ributes.Add("on keydown", "javascript:foc usNext(event,'" & Me.Button2.Clie ntID & "')")
    End Sub


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

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

    End Class

    Comment

    Working...