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>
Related
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>
I have a <div class = "row"></div> provided by Bootstrap, this row have multiple elements one select, two buttons and multiple inputs.
<div class="row" id="productlist">
<div class="col-md-6">
<label>Producto</label><br/>
<select class="select2_single form-control tg" id="product" name="product" size="4">
<option>Seleccionar Producto</option>
//PHP
</select>
<br/>
<button type="button" class="btn btn-default" id="print"><i class="fa fa-print"></i> Imprimir</button>
</div>
<div class="col-md-3">
<label>Cantidad (Kilogramos)</label><br/>
<input class="tg" type="text" placeholder="Cantidad" id="quantity" name="quantity"><br/>
<label>Precio</label><br/>
<input class="tg" type="text" placeholder="Precio" id="price" name="price"><br/>
<label>Número de Rollos</label><br/>
<input class="tg" type="text" placeholder="Número de Rollos" id="numrolls" name="numrolls"><br/>
</div>
<div class="col-md-3">
<label>Observaciones</label><br/>
<input class="tg" type="text" placeholder="Observaciones" id="remarks" name="remarks"><br/>
<label>Número de Paquetes</label><br/>
<input class="tg" type="text" placeholder="Número de Paquetes" id="numpackages" name="numpackages"><br/><br/>
<button type="submit" class="btn btn-success fixedbutton" id="add">Agregar</button>
</div>
</div>
I want to perform the same action that throws the "Tab Key" when the user use "Enter" so I made this jquery, probably the problem is that all the div is multiple columns and not just one.
$('.tg').bind('keypress', function(event) {
if(event.which === 13) {
var nextItem = $(this).next('.tg');
if( nextItem.size() === 0 ) {
nextItem = $('.tg').eq(0);
}
nextItem.focus();
}
});
Also, I show a alert when the inputs are empty and the user click in the add button (id = "add")
In keypress event, You can use $($('.tg')[$('.tg').index(this)+1]); to get next item having class tg.
This will not cover buttons . To cover buttons you will have to add class tg to buttons. Now if focus is on button then "click" event will be triggered if you will press "Enter" key. If you don't want to trigger click event on "Enter" key then you can use following code snippet.
$('.tg').bind('keypress', function(event) {
if(event.which === 13) {
var nextItem = $($('.tg')[$('.tg').index(this)+1]);
if( nextItem.size() === 0 ) {
nextItem = $('.tg').eq(0);
}
if($(this).attr('type') =='button'){
event.preventDefault();
}
nextItem.focus();
}
});
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
hello everybody ı have a question
this is my jquery code
<script type="text/javascript">
$('#com').keypress(function (event) {
var comm = $(this).val();
var keycode = (event.keycode ? event.keycode : event.which);
if (keycode == 13) {
var comm = $("#com").val();
alert(comm);
var hidid = $("#hidid").val();
alert(hidid);
$.ajax({
cache: false,
type: "POST",
url: "/Home/postComment",
datatype: "json",
data: { comment: comm, hidid: hidid },
error: function () {
alert("error ");
},
success: function () {
window.location.href = "/Home/Index";
}
});
}
event.stopPropagation();
});
</script>
and I am calling it in controller like this
[HttpPost]
public JsonResult postComment(string comment,int hidid)
{
Repository<whichOne> _rwo = new Repository<whichOne>();
Repository<Comment> _rc = new Repository<Comment>();
int _userId = Convert.ToInt32(Session["_userId"]);
Comment _comment = new Comment
{
userId = _userId,
comment = comment,
createDate = DateTime.Now,
isValid = true,
whichOneId = hidid,
};
_rc.Add(_comment);
_rc.Save();
return Json(new { success = true });
}
and I have data which are coming from database and I am trying to get id's of my datas and take comment to post from input
#foreach (var item in Model._mywhichOneHelper)
{
#Html.Hidden("hidid",#item.id)
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">}
however I can only reach first data when I hit enter after writing something.
Keypress is not working for other datas what can I do for this?
as you see when I write and click enter to first input it works but when I tried this for other datas nothing happens. thank you very much.
The problem here is your jQuery selector is only finding the first element, since it only expects one element to have an id (ids are supposed to be unique).
It is not a good practice to have multiple elements with the same id - this is part of your problem. If you can redesign your markup so that the elements have unique id's, but share a class (such as class="com") then you can easily write jQuery selectors to find them. In this case, there is still a workaround, you can use a jQuery selector like so: [id=com] instead of #com and this will find all the matching elements instead of only looking for one (expected) element with that unique id.
Also note I had to change your event handler so that it did not use another jQuery selector, but rather passed the value $self into the closure so that it held the correct unique instance instead of always finding the first.
$(function() {
$("[id=com]").keypress(function(event) {
var $self = $(this);
var comm = $self.val();
var keycode = (event.keycode ? event.keycode : event.which);
if (keycode == 13) {
var comm = $self.val();
alert(comm);
event.stopPropagation();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
Even better would be to use unique id's, and select via class, like so:
$(function() {
$(".com").keypress(function(event) {
var $self = $(this);
var comm = $self.val();
var keycode = (event.keycode ? event.keycode : event.which);
if (keycode == 13) {
var comm = $self.val();
alert(comm);
event.stopPropagation();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="pull-left input-sm form-control com" id="com1" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control com" id="com2" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control com" id="com3" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<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" ...>