We Keep Coding

Code won't work when merging a javascript code in one function

Good day everyone!
I have a problem merging the codes in one function. (If it's possible).
First:
There is a table.
When the table row click two buttons will be enabled.
Here's the code:
function enableRegButton() {
$('#registerExist').prop('disabled', false);
$('#edit').prop('disabled', false);
// regButton execute when Enter key pressed
$(document).unbind("keyup").keyup(function(e){
var code = e.which; // recommended to use e.which, it's normalized across browsers
if(code==13)
{
$("#registerExist").click();
}
});
}
Second:
When Escape key pressed it will disable all bind buttons.
Here's the code:
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
$('#registerExist').prop('disabled', true);
$('#edit').prop('disabled', true);
document.getElementById("enStudID").value = "";
document.getElementById("enInfoID").value = "";
document.getElementById("enCoffID").value = "";
document.getElementById("enYearID").value = "";
}
});
Now, what I want to do are those two codes above will merge in one function and it will call the function and trigger all those codes so when I edit the code it will be centralized.
Here's my final code:
function enableRegButton() {
$('#registerExist').prop('disabled', false);
$('#edit').prop('disabled', false);
// regButton execute when Enter key pressed
$(document).unbind("keyup").keyup(function(e){
var code = e.which; // recommended to use e.which, it's normalized across browsers
settings();
});
}
// This code is for ESC button when pressed.
$(document).keyup(function(e) {
settings();
});
function settings(){
if(code==13)
{
$("#registerExist").click();
}
else if (code==27){ // escape key maps to keycode `27`
$('#registerExist').prop('disabled', true);
$('#edit').prop('disabled', true);
document.getElementById("enStudID").value = "";
document.getElementById("enInfoID").value = "";
document.getElementById("enCoffID").value = "";
document.getElementById("enYearID").value = "";
}
}
Problem:
Only the enable button is working when table row is click
Pressing Escape key will not disable the enabled buttons.
Code won't run when pressing Enter Key.

You need to pass the key code to the settings method.
$(document).keyup(function(e) {
settings(e.keyCode);
});
function settings(code) {
Use the browser's developer console when debugging Javascript issues, it's an invaluable tool and picks up problems like this quite easily.

You are assigning the code variable in the unbind callback, not in the bind callback :)

Adding keypressing events

I have a question. I have made a small site in HTML and vanilla JS to act as a counter. It is working fine, but I wanted to add a function that would allow the user to add or subtract 1 from the counter by pressing "+" or "-", in the numpad or not.
What is the easiest way to do this in vanilla JS?

Sure, just attach to the keyup events and increment or decrement the value when the proper key is pressed.
var value = 0;
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector(".valueHolder").innerHTML = value;
});
document.addEventListener("keyup", function(event) {
if (event.which == "187" || event.which == "107") { // + key
value++;
}
if (event.which == "189" || event.which == "109") { // - key
value--;
}
document.querySelector(".valueHolder").innerHTML = value;
console.log(event.which);
});
<div class="valueHolder"></div>

You will want to add an event listener on the document
document.addEventListener('keydown', myFunction);
function myFunction(e) {
var keyCode = e.keyCode();
...
}
You'll want to look up the keycodes for the keys you will be using (+ and -) and compare that value to keyCode. Then use a conditional to execute your adding or subtracting.

You would create an event handler, which would add or subtract from a global variable based on the key pressed, like this:
window.counter=0;
function key(ev){
if(ev.keycode==107) window.counter++;
if(ev.keycode==109) window.counter--;
}
document.onkeypress = key;

SImulate "Enter pressing" when submit button is clicked

When my submit Button in the form is clicked, I need to simulate that the "Enter button" is pressed. so: clicking on the submit form is equal to pressing Enter on the keyboard. Because I want to have the same method for both...
Here is what I have, but until now it doesnt works..
$(document).on('click', '#send', function(){
$("#chatMessageTextarea").focus();
var e = jQuery.Event("keypress");
e.which = 13;
e.keyCode = 13;
});

try something like this, not tested it, hope it helps!
function keyUpFunc(e) {
var keyCode_Enter = 13;
if (e.keyCode === keyCode_Enter) {
e.preventDefault();
$('#send').trigger("click");
}
}
$(document).keyup(keyUpFunc);
$(document).on('click', '#send', function(){
// Click Event handler for send
});

I am not sure what are you trying to achieve here. But if you want that I think this link has answer to simulate keypress via jQuery.
Definitive way to trigger keypress events with jQuery
Copied code from link:
var e = jQuery.Event("keydown");
e.which = 13; // # Some key code value
$("input").trigger(e);

Try this:
$(document).on('click', '#send', function(){
$("#chatMessageTextarea").trigger({
type: "keypress",
which: 13,
keyCode: 13});
});
hope it helps!

jQuery-Enter key event function alerts repeatedly

I have to prevent the form submit if the newVal and oldVal are equal. Else I need to execute the Javascript function. - While pressing Enter key from the key board for the dynamically generated textboxes.
For this case, While pressing enter key the alert is coming repeatedly.
ie, first time one alert. Two alerts for second time.And the expected result is not getting.
What is expected: If I enter a value equals to the curValue then form doesn't have to submit.Else need to call the function myFun(); What is wrong with me?
function pressEnter(id,newValue,i)
{
var newId = '#'+id;
$(newId).keydown(function(event) {
var curValue= '<%=currentVal%>';
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert(newValue+"-"+curValue);
if(newValue== curValue)
{
event.preventDefault();
}
else
{
myFun(i);
}
}
});
}

You have to unbind previous keydown handler:
$(newId).off('keydown').keydown(function(event) {...});

You can do this comparison on form submit event rather than pressing enter key. Because user can use mouse and click the submit button.
Restrict user on form submit as follows,
$("#your_form_id").submit(function() {
var newValue = $(".your_textbox").val();
var curValue= '<%=currentVal%>';
if(newValue== curValue)
{
event.preventDefault();
//Or use return false;
} else{
myFun();
}
});
Here, we can avoid unwanted bind and unbind operations.
And we can achieve this on enter press, just write without function as follows,
$("#your_text_box_id").keydown(function(event) {
var newValue = $(".your_textbox").val();
var curValue= '<%=currentVal%>';
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert(newValue+"-"+curValue);
if(newValue== curValue)
{
event.preventDefault();
}else{
myFun();
}
}
});
Note: If you scope this jQuery code within a function,then javascript add handler for same event on every function call. Result is your code(Code in "keydown" callback) run multiple time. To avoid you have to unbind the event.

jQuery - triggering multiple events one by one

I'm using jquery tagsInput plugin where I need to dynamically modify the query(deleting the query or entering the new query) without actually typing in the search box connected with tagsInput plugin.
My problem here is I want to trigger backspace event at first then enter event next. Here is the code.
function triggering_events() {
$(".tag").each(function() {
var e = jQuery.Event("keydown");
e.keyCode = 8;
e.which = 8;
$("#input-search_tag").trigger(e); //triggering backspace event
});
var input = $("#input-search_tag");
input.val("food");
input.trigger(e); //triggering enter event
}
But only the backspace event is triggering from the above code. How can I make that enter event work?
Could anyone point out the mistake I've done?
Thanks!

you can try use the methods removeTag and addTag for remove and add tag's:
function triggering_events() {
var
idInput = 'input-search',
input = $("#" + idInput);
$("#"+idInput+"_tagsinput .tag").each(function() {
var tag = $.trim($(this).find('span:eq(0)').text());
input.removeTag(tag);
});
input.addTag("food");
}
run

There is an issue here:
$("#input-search_tag").val("food").trigger(e); //triggering enter event
.val() returns you a string value of the jquery Element, it is not a chainable method. strings do not have a trigger method.
You could fix this by splitting it into two calls:
var input = $("#input-search_tag");
input.val("food");
input.trigger(e); // triggering enter event
Or using .end():
$("#input-search_tag").val("food").end().trigger(e); //triggering enter event
Edit: putting it all together, along with reusing one event instead of creating multiples:
function triggering_events() {
var e = jQuery.Event("keydown");
e.which = 8;
$(".tag").each(function() {
$("#input-search_tag").trigger(e); // triggering backspace event
});
e.which = 13;
$("#input-search_tag").val("food").end().trigger(e); // triggering enter event
}