CODEWITHSUNDEEP
jquerykeydown
user440446
user440446

Reputation: 447

Jquery input element simulate keydown

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?

Upvotes: 1

Views: 705

Answers (2)

Aruna
Aruna

Reputation: 12022

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>

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281686

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>

Upvotes: 1

Related Questions