JavaScript function only fires when there are 2 input boxes - javascript

I have an aspx page in Visual Studio. I have a function which fires on the onkeyup.
When I have just the single control on the page, the JavaScript function is not called. When I add a second control, the JavaScript is called.
With this code, the JavaScript does not fire...
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="barcode">Barcode</label>
<input type="text" onkeyup="searchBarcode()" class="form-control" id="txtBarcode" name="barcode" />
</div>
</div>
</form>
<script>
function searchBarcode() {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>
With this code the JavaScript fires
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="registration">Registration</label>
<input type="text" class="form-control" id="txtRegistration" name="registration" />
</div>
<div class="form-group">
<label for="barcode">Barcode</label>
<input type="text" onkeyup="searchBarcode()" class="form-control" id="txtBarcode" name="barcode" />
</div>
</div>
</form>
<script>
function searchBarcode() {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>


You are missing passing event to the function
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="barcode">Barcode</label>
<input type="text" onkeyup="searchBarcode(e)" class="form-control" id="txtBarcode" name="barcode" />
</div>
</div>
</form>
<script>
function searchBarcode(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>


Try this:
<script>
window.onload = function () {
document.getElementById('txtBarcode').addEventListener('keyup', keyEvent)
}
function keyEvent(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>

Related

Jquery new line after press enter

I would like to add a new line after press enter. My code can add only 1 time. Please, help.
$(function () {
$('.items:last .item-quantity').keypress(function(e) {
var keyCode, path, duplicate;
keyCode = e.keyCode || e.which;
if(keyCode == '13') {
path = '.items:last';
duplicate = $(path).clone();
duplicate.children().val(null);
$(path).after(duplicate);
$(path + ' .item-name').focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 items">
<input type="text" class="form-control item-name col-xs-2" placeholder="Name">
<input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity">
</div>

The problem is that you are only attaching the keypress event listener to the last input element when the page loads. You could delegate the event handler to a common ancestor element in order to listen to the event on the newly appended elements:
$(document).on('keypress', '.items:last .item-quantity', function(event) {
var keyCode = event.keyCode || event.which;
var path = '.items:last';
var $duplicate = $(path).clone();
if (keyCode === 13) {
$duplicate.children().val('');
$(path).after($duplicate);
$('.item-name', path).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 items">
<input type="text" class="form-control item-name col-xs-2" placeholder="Name">
<input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity">
</div>
In the snippet above, the event listener is delegated to the document object. This means that a check is made for all the keypress events that propagate up the document object. Therefore it would be more efficient if you can attach the event listener directly to to a common ancestor.
For instance:
$('.parent-container').on('keypress', '.items:last .item-quantity', function(event) {
var keyCode = event.keyCode || event.which;
var path = '.items:last';
var $duplicate = $(path).clone();
if (keyCode === 13) {
$duplicate.find('input').val('');
$(path).after($duplicate);
$('.item-name', path).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-container">
<div class="col-xs-12 items">
<input type="text" class="form-control item-name col-xs-2" placeholder="Name">
<input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity">
</div>
</div>

Just delete the focus()?
$(function () {
$('.items:last .item-quantity').keypress(function(e) {
var keyCode, path, duplicate;
keyCode = e.keyCode || e.which;
if(keyCode == '13') {
path = '.items:last';
duplicate = $(path).clone();
duplicate.children().val(null);
$(path).after(duplicate);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 items">
<input type="text" class="form-control item-name col-xs-2" placeholder="Name">
<input type="text" class="form-control item-quantity col-xs-2" placeholder="Quantity">
</div>

Getting focus on next input element anywhere on the page

<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
Consider this section for instance.
There are two textboxes (anywhere on a page).
I'm trying to set focus from the first input to the immediate next input when the user presses Enter key.
How would I achieve this in JQuery?

Try this this will help you
$(document).ready(function() {
$('input').on("keypress", function(e) {
if (e.which == 13) {
var tab = $(this).attr("tabindex") + 1
$("input[tabindex=" + tab + "]").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="1" />
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="2" />
</td>
</tr>
</table>
</div>

You can use the .keypress event of jQuery.
HTML
<div>
<table><tr><td><input type="text" id="first" autofocus/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" id="second"/></td></tr></table>
</div>
jQuery block
$(document).ready(function(){
$('#first').keypress(function(e){
if(e.keyCode ==13)
{
$('#second').focus();
}
})
});
Working DEMO : https://jsfiddle.net/ne403qyb/
Hope this helps!

$(document).ready(function() {
$('input[type=text]').keypress(function(e) {
if (e.keyCode == 13) {
if ($(this).attr('class') === "last") {
$('input[type=text]').eq(0).focus()
} else {
$('input[type=text]').closest('input[type=text]').focus();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" />
<input type="text" class="last" />
</form>

Try this :)
$(document).keypress(function(e) {
if(e.which == 13) {
var focusElem = document.activeElement;
var nextInput = $(focusElem).next().attr('id');
$("#" + nextInput).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" />
<input type="text" id="input_2" />
<input type="text" id="input_3" />
<input type="text" id="input_4" />

$(document).on("keydown", "#Textbox1", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
e.preventDefault();
$("#Textbox2").focus();
}
});
Woking Fiddle

You can give all of you input elements a class(you can do the same by input text tag in case you do not have the input type text element in your document on which you do not want the focus ) and can find the next input element having same class.
$(".test").keypress(function(e) {
var inputs = $(".test");
if(e.which == 13) {
var $next = inputs.filter(":gt(" + inputs.index(this) + ")").first();
$next.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table><tr><td><input class ="test"type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>

You can try other alternative as jsfiddle,
HTML :
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
JS :
$(document).on("input", "input", function(e){
if(e.which == 13){
$(this).next('.inputs').focus();
}
});

How to press enter in input type text call function javascript by not submit form?

How to press enter in input type text call function javascript by not submit form ?
When fill data into input type text and press enter keyboard i want only to call function detect_enter_keyboard(event) by not to submit form.
How can i do that ?
https://jsfiddle.net/atuyx7qc/
<form>
<input type="text" name="user" onkeypress="detect_enter_keyboard(event)">
<input name="btnLogin" onclick="test_fn();" type="button" value="Send">
</form>
<script>
function detect_enter_keyboard(event) {
var key_board_keycode = event.which || event.keyCode;
if(key_board_keycode == 13)
{
test_fn();
}
}
</script>
<script>
function test_fn(){
alert("555555");
}
</script>

With preventDefault(). Add this line after if(key_board_keycode == 13):
event.preventDefault();

use this
function detect_enter_keyboard(event) {
var key_board_keycode = event.which || event.keyCode;
if(key_board_keycode == 13)
{
event.preventDefault();
test_fn();
}
}
function test_fn(){
alert("555555");
}
<form >
<input type="text" name="user" onkeypress="detect_enter_keyboard(event)">
<input name="btnLogin" onclick="test_fn();" type="button" value="Send">
</form>

Submitting form in JS using enter key instead of a submit button

I am inexperienced with forms but want to pass the text from an input field to the rest of my code whenever the user presses the enter key in the input field (I am testing it with an alert at the moment but can't get it to fire). I am using the following JS:
$(document).ready(function() {
$("#task").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
alert("test");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" action=" " method="get" autocomplete="off" role="form" autofocus>
<div class="form-group">
<input class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:">
</div>
</form>
Is it possible that I need to adjust the "action" field?

Solution:
<input id="task" class="form-control input-lg" type="text" autofocus
placeholder="Enter your task:">
document.getElementById("task").onkeydown = function (event) {
event = event || window.event;
if(event.keyCode == 13) {
// Enter was pressed
}
}
Demo:
document.getElementById("task").onkeydown = function(event) {
event = event || window.event;
document.getElementById("exampleOutput").innerHTML = event.keyCode
if (event.keyCode == 13) {
// Enter was pressed
// Example:
document.getElementById("exampleOutput").innerHTML += " Enter"
}
}
<input id="task" class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:">
<div id="exampleOutput"></div>

EDIT: Just tried your code in a jsfiddle and it works. Did you include JQuery before the scripts?
You can bind the keypress event to the form instead like this. This way there won't be an event tied to every input you have. This event will fire when enter is pressed on any input in the form.
$(document).ready(function() {
$(".form").on("keypress", ":input", function(e) {
if (e.which == 13) {
e.preventDefault();
alert("form submitted");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" action=" " method="get" autocomplete="off" role="form" autofocus>
<div class="form-group">
<input class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:">
</div>
</form>

$(document).ready(function() {
$('input[type=text]').on('keyup', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" action=" " method="get" autocomplete="off" role="form" autofocus>
<div class="form-group">
<input class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:">
</div>
</form>

used your code in Fiddle ..it is working fine..find a fiddle demo of the same below
$("#task").keypress(function (event) {
var key = event.which;
if (key == 13) {
event.preventDefault();
alert($(this).val());
}
});
Demo

How do I trigger ESC button to clear text entered in text box?

<input type="text" id="search" size="25" autocomplete="off"/>
I know it is something with
onkeydown="if (event.keyCode == 27)

Declare a function which will be called when a key is pressed:
function onkeypressed(evt, input) {
var code = evt.charCode || evt.keyCode;
if (code == 27) {
input.value = '';
}
}
And the corresponding markup:
<input type="text" id="search" size="25" autocomplete="off"
onkeydown="onkeypressed(event, this);" />

<input type="text" value="" onkeyup="if ( event.keyCode == 27 ) this.value=''" />
This should work.

$('input[type=text]').each(function (e) {
$(this).keyup(function (evt) {
var code = evt.charCode || evt.keyCode;
if (code == 27) {
$(this).val('');
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" autofocus value="input data" placeholder="ESC button clear" style="padding:5px;">
<p>Hit esc button to see result</p>

function keyPressed(evt) {
if (evt.keyCode == 27) {
//clear your textbox content here...
document.getElementById("search").value = '';
}
}
Then in your input tag...
<input type="text" onkeypress="keyPressed(event)" id="search" ...>

Categories

Resources