using keypress and click for submit - javascript

How do I make a click event and keypress work in the same if statement?
Right now I have :
if($('.test').is(':visible;)){
$('button').click(function(e){
..do something here
}else {
..do something here
});
.test is the value field that when the user puts in the value I want them to be able to click the enter key, while they are in this box to submit the information or use the button to do so. This is not in a form, they are all in divs.

So put the logic into a common function and call it for click and keypress.
(function () {
function yourLogic () {
$(".out").text($(".yourInput").val());
}
$("button").on("click", yourLogic);
$(".yourInput").on("keyup", function (evt) {
if (evt.which===13) yourLogic();
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="yourInput" />
<button>Click</button>
<div class="out"></div>
or do not use a common function and call the click() event on the button.
$(".yourInput").on("keyup", function (evt) {
if (evt.which===13) $("#yourButton").trigger("click");
});

If you got a form, then bind submit handler:
$("form").submit(function(e){
e.preventDefault();
// your event handler here
});
It will be triggered when you press enter to submit the form, and when you click submit button at the same time.

You can use it like this:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});

Or simply click on background
$(document).keypress(function(e) {
if(e.which == 13) {
$('button').trigger("click");
}
});
//if($('.test').is(':visible;)){
$('button').on("click",function(e){
alert("click or enter");
e.stopPropagation();
});
// }
// else {
// ..do something here
//}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button>CLick me</button>

Related

How come e.preventDefault is not executing on a keydown event?

I have made the form able to submit by pressing return on the keyboard or by pressing the button. However, for some reason the e.preventDefault won't execute and page refreshes on every submit. How can I use e.preventDefault with my current event? Or is there a better way? Full codepen
What I tried:
// e.preventDefault not working
todoForm.addEventListener('keydown', function (e) {
if (e.code === 'Enter') {
e.preventDefault();
addButton.click();
}
addButton.onclick = function () {
addTodo(input.value);
};
});
todoForm.addEventListener('submit', function (e) {
e.preventDefault();
addTodo(input.value);
});
todoForm.addEventListener('keydown', function(e) {
if (e.code === 'Enter') {
e.preventDefault();
addTodo(input.value); // You can simply call function here itself
}
});
It's pretty simple you're calling e.preventDefault() on your keydown event which means, when you press some key again it will not work since you are preventing it,
addButton.addEventListener('click', function(e){
e.preventDefault();
addTodo(input.value);
})
todoForm.addEventListener('keydown', function (e) {
if (e.code === 'Enter') {
e.preventDefault();
addButton.click();
}
});
Or instead you can use this too:
todoForm.addEventListener('submit', function(e){
e.preventDefault();
addTodo(input.value);
})
todoForm.addEventListener('keydown', function (e) {
if (e.code === 'Enter') {
e.preventDefault();
addButton.click();
}
});
Just a Quick Tip: add cursor: pointer; in your delete button styles and add .delete-button:hover { background-color: tomato; } in your css styles too, it looks better now!
Edit:
todoForm.addEventListener('submit', function (e) {
e.preventDefault();
addTodo(input.value);
});
Well i realised simply this will work Too! no need to add onsubmit or something just replace your code with this one, because when you press enter key the submit event is triggered so no need to manually add an event listener for that and no need to add event listener for Button too because that will also trigger submit event because it's set to do so!
The problem is the event is bubbling up and the submit event of your form is being called. Note that preventDefault only in <form> submit or submit button, prevent to refresh page. in other case submit event being called.
So you need to add preventDefault to onsubmit event not keydown event. But there is easy way to do that. Just add onsubmit="return false" in your html form:
<div class="container">
<div class="task-count"></div>
<form class="todo-form" onsubmit="return false">
<textarea id="message-box" class="todo-input todoText" style="resize: none;" rows="1" placeholder="type a todo item"></textarea>
<button type='submit' class="add-button">Add</button>
</form>
<ul id="todoList" class="todo-items"></ul>
</div>

JavaScript function getting called twice on Enter key press

I have a button in my html page
<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />
I have binded a jquery click event to this button like
$('#btnLogin').click(function () {
ValidateLogin();
});
I'm also checking the enter key press to call the same function ValidateLogin(); like below
$(document).keypress(function (e) {
if (e.which == 13) {
ValidateLogin();
}
});
The issue that i'm facing is when the user presses the tab key to get in focus over the Login button and then press Enter Key the ValidateLogin() is called twice.How to deal with this situation.
Note : i can't use type="submit" to do a form submit ..since i'm using ajax call on button click
You should use the submit event instead. Your browser is probably firing the click event when pressing enter and that is effectively the same as pressing the submit button:
$("form").submit(function(e) {
// Stop the form submitting
e.preventDefault();
ValidateLogin();
});
function ValidateLogin() {
$.ajax({
// ...
}).done(function(e) {
if(!e.valid) {
alert("Invalid Login");
}
});
}
Second reason, even if your keypress was to work correctly, I can press a button by pressing spacebar too.
Here is a full Fiddle to demonstrate.
Since it's a form I would prefer to attach event on form elements instead on document.
Use form element like text, textarea etc. on click of enter should submit the form.
$('input:text, textarea').keypress(function (e) {
if (e.which == 13) {
ValidateLogin();
}
});
In your case event is bubbled from the button to document hence it is called twice.
Its working fine check this fiddler DEMO
<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />
$('#btnLogin').click(function () {
//ValidateLogin();
alert('click');
});
$(document).keypress(function (e) {
if (e.which == 13) {
//ValidateLogin();
alert('enter');
}
e.preventDefault();
});

jquery change sometimes event prevents click event

In the following example, there is a simple input field and a button.
<body>
<input type="text" id="in">
<input type="button" value="click" id="button">
</body>
There is a change-event-function on the input field and a click-event-function on the button.
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
//window.alert('change event');
});
$('#button').click(function() {
console.log('click event');
});
});
On changing the value of the input field and immediately clicking the button (without leaving the cursor), my expectation is, that both events are fired. Unfortunately this behavior depends on the code executed inside the change-function e.g. on uncommenting the window.alert line, the click event is NOT fired - or the click-event-function is not executed. Why? How can I avoid code, which prevents the click-event-function from executing?
Update:
instead of the window.alert, the jquery.hide has the same effect
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
$('#hide').hide();
});
$('#button').click(function() {
console.log('click event');
});
});
If you want to fire both of two events, you can do like this:
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
window.alert('change event');
$('#button').click();
});
$('#button').click(function() {
console.log('click event');
});
});
Try
$(document).mousedown(function(e){
console.log('click event');
});
The mousedown event will occur before textbox change and click events so that you need to set time out and check the changed value of the text box if required.

Using click event while button is disabled

I need to check on clicks while the button is disabled is this possible? Or is there any other way to this?
HTML:
<form id="form">
<input type="submit" id="submit" value="Submit" />
</form>
JS:
$("#form").submit(function (e) {
e.preventDefault();
return false;
$("#submit").on("click", function () {
alert("Bla");
});
});
JS Fiddle: http://jsfiddle.net/hjYeR/1/
When you are using preventDefault(), there is no need to use return false.
However, any code after return statement in a function, won't execute.
Also there is no need to attach an event inside another event, write them separately:
$("#form").submit(function (e) {
e.preventDefault();
});
$("#submit").on("click", function () {
alert("Bla");
});
jsFiddle Demo
After you return false; the rest of your function will not run. You can bind your click event before returning false and it should work.
return statements are the end point in the function, the codes will not proceed ahead of that.
What you can do is simply remove the click event handler from within the submit handler itself.
$("#form").submit(function (e) {
return false; //e.preventDefault(); is not needed when used return false;
});
$("#submit").on("click", function () {
alert("Bla");
});

jQuery UI Dialog Button Won't Click

The alert is working, but the button just won't click...
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').click();
return false;
}
});
I have tried many different things, including reinitializing the method when the dialog gets opened, but nothing seems to work...
Html:
<div id="loginDialog" title="Please Login">
<div class="label">Password:</div>
<div class="field"><input type="password" /></div>
</div>
the ui-button is generated by jquery ui
I'm assuming from your comment that the button is generated dynamically and that any click event you have bound to is will have to be bound using event delegation, similar to:
$('body').on('click', '.ui-button', function(){...)
Instead of body, using the closest static element will work as well and would be preferred.
Please, try this:
$(function() {
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').trigger('click');
return false;
}
});
$('.ui-button').click(function() {
alert('hello world');
});
};
Here there is an example: http://jsfiddle.net/netme/YZH3B/
This should trigger the event ...
$('.ui-button').trigger('click');

Categories