Javascript is not working if I add a second textbox

Question

please help me, I'm trying to click a hidden button if the user press the ENTER key inside a text box. It works fine with one text box, but if I add another, java script don't work.

~~TextBox~~. ------------------------------------------------------------------------------------------

  <pre> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>

        <form id="form1" runat="server">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:Button ID="Button1" runat="server" Text="Button" 
                onclick="Button1_Click1" style="visibility: hidden; display: none;" />

    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <script type="text/javascript">

        var myInput = document.getElementById("TextBox1");
        if (myInput.addEventListener) {
            myInput.addEventListener('keydown', this.keyHandler, false);
        } else if (myInput.attachEvent) {
            myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
        }

        function keyHandler(e) {
            var EnterKEY = 13;
            if (e.keyCode == EnterKEY) {

                if (e.preventDefault) {

                    document.getElementByID("Button1").click();
                    e.preventDefault();
                }
                return false;
            }
        }
    </script>

        &nbsp;
            <br />
            <asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
        </form>
    </body>
</pre>
    ------------------------------------------------------------------------------

    CODE BEHIND
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            protected void Button1_Click1(object sender, EventArgs e)
            {
                    TextBox2.Text = "It Works";

            }
        }

thanks for the quick response, im trying to "click" the "Button1" if the user press Enter, in the Button1 code behind I set a new value to TextBox2. — user2268066
– user2268066, Commented Apr 10, 2013 at 22:11

pollirrata · Accepted Answer · 2013-04-10 22:32:23Z

2

Try wrapping your javascript code inside of a document.onload function

window.document.onload = function(e){
var myInput = document.getElementById("TextBox1");
        if (myInput.addEventListener) {
            myInput.addEventListener('keydown', this.keyHandler, false);
        } else if (myInput.attachEvent) {
            myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
        }

//adding the second textbox
myInput = document.getElementById("TextBox2");
            if (myInput.addEventListener) {
                myInput.addEventListener('keydown', this.keyHandler, false);
            } else if (myInput.attachEvent) {
                myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
            }

        function keyHandler(e) {
            var EnterKEY = 13;
            if (e.keyCode == EnterKEY) {

                if (e.preventDefault) {

                    document.getElementByID("Button1").click();
                    e.preventDefault();
                }
                return false;
            }
        }
}

so your script is executed once the DOM tree is fully loaded

edited Apr 10, 2013 at 22:32

answered Apr 10, 2013 at 22:10

pollirrata

5,2942 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2268066 Over a year ago

hi pollirrata! i wrap the java script code, but it still not working, :(, btw thanks for your help!

pollirrata Over a year ago

I skipped that in the answer, but you need to add the listener to both textboxes.. I'll edit to show that

skuntsel · Accepted Answer · 2013-04-16 15:54:11Z

0

Looking at your code you only bind your keyhandler(e) function to the element TextBox1 but not on TextBox2. Try creating a new binding code also for your TextBox2.

var myInput2 = document.getElementById("TextBox2");
if (myInput2.addEventListener) {
    myInput2.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
    myInput2.attachEvent('onkeydown', this.keyHandler); /* IE hack */
}

edited Apr 16, 2013 at 15:54

skuntsel

11.8k11 gold badges49 silver badges68 bronze badges

answered Apr 16, 2013 at 15:25

Fitz

1

Collectives™ on Stack Overflow

Javascript is not working if I add a second textbox

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related