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>
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");
}
}});
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);
}
});
});
Related
I got a textbox on my form. I want the users to not have the ability to press space in the keyboard. I'm using the code below to disable spacing. I don't understand why it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
<script>
function noSpaces()
{
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
}
</script>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb" onkeydown="noSpaces()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
</script>
</html>
The onkeydown event subscribes to the noSpaces function which then re-subcribes using jquery for input for keydown. Pick one or the other but do not subscribe multiple times because now you add a new subscription with every event call.
Added CDN reference to jquery
$(document).ready(function(){
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
})
I guess this code is enough for you you don't need to define onkeydown="noSpaces()" and noSpaces function
I prefer would use keyup and would solve it like this:
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keyup", function (e)
{
$(this).val($.trim($(this).val()));
});
</script>
You have not included jquery library. You first have to include that and then this will work.
$("input").on("keydown", function (e) {
return e.which !== 32;
});
I have tried the tutorial are there, but still could not work, what's wrong with my code?
Parent Page Script:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
var money = 20000;
$("#iframe1").contents().find("#nominal").on("change keyup", function() {
var input = $(this);
// remove possible existing message
if( input.next().is("form") )
input.next().remove();
// show message
if( input.val() > money )
alert('Hello');
});
});
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
Iframe script:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
please tell me what was wrong, thanks advance.
In your HTML page
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
var money = 20000;
function my_custom_function(input)
{
// remove possible existing message
if( input.next().is("form") ) input.next().remove();
// show message
if( input.val() > money ) alert('Hello');
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
In your iframe code
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<script>
$(function() {
$("#nominal").change("change", function() {
parent.my_custom_function($(this));
});
$("#nominal").change("keyup", function() {
parent.my_custom_function($(this));
});
});
</script>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
Hope this trick will be helpful to you.
You have two possible scenarios:
if you can modify iframe page;
if you can't.
Your problem is that when your javascript run, the content of iframe could be not available, so JQuery cannot "attach" to child controls.
If you can change your iframe code, you can add this script to your iframe page
window.onload = function() {
parent.iframeLoaded();
}
and obviously on the parent page you must change your code to
$(function() {
var money = 20000;
window.iframeLoaded = function() {
$("#iframe1").contents().find('#nominal').on('keyup', null, function(event) {
var input = $(this);
// show message
if( input.val() > money )
alert('Hello');
});
}
});
});
If you instead cannot change iframe html, you cannot bind to keyup event of controls but you can bind to iframe one, so in this case you need to bind keyup of iframe and then filter for #nominal originated event, and your code should be like this
$(function() {
var money = 20000;
$("#iframe1").contents().on('keyup', null, function(event) {
if(event.target.id === 'nominal'){
var input = $("#iframe1").contents().find('#nominal');
// show message
if( input.val() > money )
alert('Hello');
}
});
});
I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
var input = document.getElementById("search");
function sendToPage(){
if (input.value == "happy"){
location.href="suggestion_happy.html";
}
else if (input.value == "sad"){
location.href="suggestion_sad.html";
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<form onsubmit="sendToPage()">
<input type="text" method="put" id="search" placeholder="Search" value="">
</form>
</div>
</body>
</html>
Please help I'm still kind of new to javascript :)
you don't need to create a form to do this
check out this code
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
location.href = "suggestion_happy.html";
return false;
}
else if (input == "sad"){
location.href = "suggestion_sad.html";
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<input type="text" method="put" id="search" placeholder="Search" value="">
<input type='submit' onclick="sendToPage();" />
</div>
</body>
</html>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
//location.href="suggestion_happy.html";
location.replace("suggestion_happy.html");
return false;
}
else if (input == "sad"){
location.replace("suggestion_sad.html");
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
<div>
<form action="" onsubmit="return sendToPage()" method="post">
<input type="text" id="search" placeholder="Search" value="">
</form>
</div>
I have edited my asnwer plz try this
there are two problems here:
submitting a form will always refresh the page. So onsubmit is
killing your app
by putting the js in the <head> your
document.getElementById call fails because that element doesn't
exist yet. Javascript belongs at the end of the page, just before
the closing </body> tag
This code works fine when I map the function to the "Ctrl" key (char code 17). But it submits the page when I change it to the "Enter" key (code 13). Why would this happen?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../utilities/utility.js"></script>
<script>
$(document).ready(function(){
$("#userInput").keyup(function(event){
if(event.keyCode == 17){ // <--- ***** RIGHT HERE *****
processInput();
}
});
flashcards_main();
});
</script>
<script type="text/javascript" src="flashcards.js"></script>
</head>
<body>
<p id="question">The question paragraph.</p>
<p id="sub_question">sub-question</p>
<form name="chloroForm">
<input id="userInput" type="text">
<input id="userSubmitBtn" type="button" value="Submit" onclick="processInput()">
</form>
</body>
</html>
EDIT:
I changed the function below but I get the same problem:
$(document).ready(function(){
$("#userInput").keyup(function(event){
if(event.keyCode == 13){
event.preventDefault();
processInput();
}
});
flashcards_main();
});
You need to use preventDefault() on the event to stop the default behaviour of the key being pressed:. You also need to use the keypress event:
$("#userInput").keypress(function(event){
if (event.keyCode == 17 || event.keyCode == 13) {
event.preventDefault();
processInput();
}
});
Example fiddle
hi2all i need to handle only the enter button event but my code handle enter even when i click
another button with it
for example when i click Shift+enter from kb it handle click i want to prevent such thing
i want to handle pressing enter alone
{____________
another issue
i want to add new line after each appended text
my code is here
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$(this).attr("disabled", true);
});
$("#entr").keypress(function(e) {
if (e.which == 13) {
alert("enter pressed");
$("#texts").append($("#entr").val());
}
});
});
</script>
</head>
<body>
<div id="m" style="background-color: darkorange;">click me to change webpage background</div>
<input id="entr" type="text" value="enter some text here" />
<input id="button1" type="button" value="me" />
<p id="texts">text in text box will appended here
<br />
</p>
</body>
</html>
<script type="text/javascript">
//change the color of webpage when clicking the div
var x = document.getElementById("m");
x.addEventListener("click", function() {
document.body.style.backgroundColor = "darkturquoise";
});
</script>
Here's what you need to do. Bind your event keypress to the body.
jQuery(document).ready(function(){
jQuery('body').on('keypress', function(e){
// We are looking for the action "enter"
if(e.which == 13){
// Must not be with shift
if(event.shiftKey !== true){
alert(' Enter ! ');
}
}
});
});
To add a new line, you have to append MyVar = MyVar + '<br />'+"\r\n";
////will work for shift+enter
if (event.keyCode == 13 && event.shiftKey) {
}
How do I detect "shift+enter" and generate a new line in Textarea?