Would suggest not to mix jQuery and pure JavaScript. All you need is to add the keyup keydown instead of input:
$('table input').on('keyup keydown', function() {
var parent = $(this).closest('tr');
var value = parent.find('[name="item_value[]"]').val();
var amount = parent.find('[name="quantity[]"]').val();
var total_cost = value * amount;
parent.find('[name="total_cost[]"]').val(total_cost);
total_value = total_value + total_cost;
$('#total').val(total_value);
});
Answer from Praveen Kumar Purushothaman on Stack OverflowWould suggest not to mix jQuery and pure JavaScript. All you need is to add the keyup keydown instead of input:
$('table input').on('keyup keydown', function() {
var parent = $(this).closest('tr');
var value = parent.find('[name="item_value[]"]').val();
var amount = parent.find('[name="quantity[]"]').val();
var total_cost = value * amount;
parent.find('[name="total_cost[]"]').val(total_cost);
total_value = total_value + total_cost;
$('#total').val(total_value);
});
change input to keyup:
$('table input').on('keyup', function(){
var parent = $(this).closest('tr');
var value = parent.find('[name="item_value[]"]').val();
var amount = parent.find('[name="quantity[]"]').val();
var total_cost = value * amount;
parent.find('[name="total_cost[]"]').val(total_cost);
total_value = total_value + total_cost;
document.getElementById('total').value = total_value;
});
Read more about keyup
Your code works for me (see below). Maybe check where you are binding your keyup event. It should be bound once when the document loads before the page shows. If you bind it multiple times (i.e. if the code that contains your keyup function runs more than once) you will run into problems.
$("#arama").on("keyup", function(event) {
var i = event.keyCode;
if ((i >= 48 && i <= 57) || (i >= 96 && i <= 105)) {
$("#arama").off("keyup");
console.log("Number pressed. Stopping...");
} else {
console.log("Non-number pressed.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="arama" />
No need to unbind the event. Try this
$("#arama").on("keyup",function(event) {
console.log("asd");
});
Also the url in the ajax call does not support ~/. You need to use razor syntax to generate, or the best sotionis to set the base href in html
Your HTML is malformed (your GetKey function call is using double quotes inside double quotes). That is causing issues potentially but since you're using Razor I haven't tested it. Your initial function is trying to hook up the event before the element is even defined so that would fail as well. The browser's console window should be showing you errors for these.
Here's the simplest equivalent code to do what you want.
-
Search
As Math already stated, you can create a function that runs as per key press (or release in your case). The function should refine the search. I would recommend JS for this, but if you want to use jQuery, then here is what you could do:
$("#mySearch").on("keyup", function()
{
// Refine search here
});
Or alternatively, you could just use the .keyup() function:
$("#mySearch").keyup(function()
{
// Refine search here
});
Hope this helps
Instead of trying to trigger the keyup event programmaticaly, you can call the function you assigned to it. So in core JS you would have :
In the HTML :
<input id="mySearch" type="text" onkeyup="myFunction()">
In the JS you create the function myFunction witch will refine you search. And when you want to change the value of your input you can call to function just after the change :
function myfunction() {
//refine search code
}
//change the value of the input
document.getElementById('mySearch').value = "j";
myFunction();