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=".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>
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./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>
- Do you want that to happen if the user hits enter anywhere on the page, or enter a value then hits enter ? – Loufylouf Commented Mar 19, 2016 at 9:23
-
you could use an
onChange()event, but it depends on what you want to do with the value. I would go for a regularform submit– RST Commented Mar 19, 2016 at 9:25 - If you set a submit button in form (can be hidden by styling) then pressing enter on input will trigger a synthetic click on this dubmit button and then you would get your value server side depending form action attribute – A. Wolff Commented Mar 25, 2016 at 23:31
7 Answers
Reset to default 5Use 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./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./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");
}
}});
function getVal(ele) {
if(event.keyCode == 13) {
alert(ele.value);
}
}<input type="text" onkeydown="getVal(this)"/><script>
$(document).on('keyup','#quan',function(){
var code = e.keyCode || e.which;
if(code == 13) { //Enter keycode
//Do something
}
});
</script>
like this
$(document).ready(function(){
$('#quan').keyup(function (e){
var model=$(this).val();
if(e.keyCode == 13){
alert(model)
}
})
});
Try this:
<script type="text/javascript">
$( "input" ).keypress(function( event ) {
if ( event.which == 13 ) {
alert($(this).val());
}
});
</script>
you can do something like this
<script type="text/javascript">
$( "input" ).keypress(function( event ) {
if ( event.which == 13 ) {
consol.log($(this).val());
}
});
</script>
where 13 is enter key code when you enter it in keyboard you can see the value in console
$(document).ready(function(){
$('#quan').keyup(function (event) {
if (event.which === 13) {
var model = $(this).val();
console.log(model);
}
});
});