Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i get input field value on hitting enter

I am trying to get the value from input box when user hit enter. i do not need any button. How can i achieve that

test.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>

<form action="#" method="GET" enctype="multipart/form-data">
    <center>
            <input name="quan" align="middle" type="text" id="quan" placeholder="quan" title="If You Want Change Quantity Then Type Here"  size="4">
    </center>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        var model=$('#quan').val();
        console.log(model);
    });                                     
</script>
</body>
</html>
like image 310
bc110402307 Syed Zeeshan Haide Avatar asked Dec 01 '22 16:12

bc110402307 Syed Zeeshan Haide


2 Answers

Use keyup() or keydown() function. Appending to it, use event.keyCode == 13 for getting the value after hitting enter button.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<form action="#" method="GET" enctype="multipart/form-data">
    <center>
            <input name="quan" align="middle" type="text" id="quan" placeholder="quan" title="If You Want Change Quantity Then Type Here"  size="4">
    </center>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
      $('#quan').keydown(function(event) {
          if (event.keyCode == 13) {
              var model=$('#quan').val();
              alert(model);
              // Use this 'model' variable
          }
      });
 });
</script>
</body>
</html>

User's Requirement

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
      $('#quan').keydown(function(event) {
          if (event.keyCode == 13) {
              var model=$('#quan').val();
              $.ajax({url:"nextPage.php?model="+model,cache:false,success:function(result){
                    alert("success");
              }});
          }
      });
 });
</script>

nextPage.php (Create a new page. Make sure, your page name matches with the page name given in <script></script>. Both are related.)

<?php
$model = $_GET['model'];

//Now, use this '$model' wherever you want to use in this page. 

?>

Success & Error

$.ajax({url:"nextPage.php?model="+model,cache:false,success:function(result){
      if(result.status == 'success'){
                alert("success");
      } else if(result.status == 'error') {
                alert("Error");
      }
}});
like image 145
Nana Partykar Avatar answered Dec 04 '22 04:12

Nana Partykar


function getVal(ele) {
    if(event.keyCode == 13) {
        alert(ele.value);        
    }
}
<input type="text" onkeydown="getVal(this)"/>
like image 22
Niklesh Raut Avatar answered Dec 04 '22 05:12

Niklesh Raut