Jquery input element simulate keydown

Question

I just write the following code to test if the juqery code of key ENTER function simulation works:

<html>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
        function Test()
        {
          var e = jQuery.Event("keydown");
          e.keyCode = 13;
          $("#test_id").trigger(e);
       }
</script>
<body>
    <div>
        <form method="get" id="form" action="http://www.twitter.com">
           <input type="text" value="" name="test_id" id="test_id" />
           <input type="text" value="" name="test_id1" id="test_id1" />
           <button type="submit">go</button>
        </form>
        <a href="javascript:Test()"  id="btn_nfc" ><font size="10">Test</font></a>
    </div>
</body>
</html>

if the code works correctly, then it will redirect to twitter.com, but actually when I click the button "Test", nothing happened, is there anything wrong in the code?

why you need jquery for that? on submit it will hit the action? — ScanQR
– ScanQR, Commented Nov 28, 2016 at 3:35
@TechBreak yes, for submit, it is ok, but there are somewhere that do not have the form or submit, so actually I try to simulate the "Enter" keydown event — user440446
– user440446, Commented Nov 28, 2016 at 6:36

Shubham Khatri · Accepted Answer · 2016-11-28 04:26:55Z

1

You should use your keydown event on the form rather then the test link. Try this code below

$(function(){
    $('form').on('keydown', function(e){
      e.stopPropagation();
      if(e.keyCode == 13) {
        alert('testing');
      }
    })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div>
        <form method="get" id="form" action="http://www.twitter.com">
           <input type="text" value="" name="test_id" id="test_id" />
           <input type="text" value="" name="test_id1" id="test_id1" />
           <button type="submit">go</button>
        </form>
        <a href="javascript:Test()"  id="btn_nfc" ><font size="10">Test</font></a>
    </div>
</body>

answered Nov 28, 2016 at 4:26

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

user440446 Over a year ago

yes, the alert function works well, but nothing else happen, while when we press "enter" key in the input, it will go to the new url page

Shubham Khatri Over a year ago

You want to redirect to twitter.com right, is it not redirecting. It sure is not in the snippet but try this in your code and see if it works.

Aruna · Accepted Answer · 2016-11-28 04:38:03Z

I hope you wish to programmatically submit the form.

But I will explain your current code first.

Inside the Test() function, you are triggering the keydown event of the textbox and nothing happened. Since you don't have any keydown event handler specified to the textbox like the one ("#test_id").on('keydown', function(e) { })

I have given such an event handler and you can see, this is getting executed when you click the Test link.

You can test the redirect to twitter with help of a web page created locally in your machine and copying the below code.

To submit the form on the keydown event, $( "#form" ).submit() is used below inside the event handler which you can directly use inside the Test function if you intent to programmatically submit the form rather than registering the keydown event handler and trigger it from the Test function.

You can use like this,

       function Test()
        {
          $( "#form" ).submit();
       }

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
        function Test()
        {
          // You can uncomment and use the one liner to submit the form
          //$( "#form" ).submit();

          var e = jQuery.Event("keydown");
          e.keyCode = 13;
          $("#test_id").trigger(e);
       }
  
       // registering 'keydown' event handler
       $(document).ready(function(){
         $("#test_id").on('keydown', function(e) {
           if(e.keyCode === 13) {
             console.log('Form submitted');
             $( "#form" ).submit();
           }
         });
       });
</script>
<body>
    <div>
        <form method="get" id="form" action="http://www.twitter.com">
           <input type="text" value="" name="test_id" id="test_id" />
           <input type="text" value="" name="test_id1" id="test_id1" />
           <button type="submit">go</button>
        </form>
        <a href="javascript:Test()"  id="btn_nfc" ><font size="10">Test</font></a>
    </div>
</body>
</html>

you are right, when there is not any jquery code in the file, and we press the "Enter" key in the input element, the page will redirect to the new url, so I just want to simulate the "Enter" key event. BTW, I know that sumit function can work well, but there are are somewhere that do not contain form or submit.

Collectives™ on Stack Overflow

Jquery input element simulate keydown

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related