We Keep Coding

using keypress and click for submit

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>

Issues catching the 'Page Down'/'Page Up' key events

I need to catch when the PageUp/PageDown keys are pressed and an element is scrolled, but I've so far been unable to do so. I've tried
Listening for 'keydown' event**: an event triggers when a non-scrolling element is in focus, but when a scrolling element is in focus, no event fires
$(window).on('keydown', function(e)
{
console.log(e.keyCode === 34);
});
Listening for 'keypress' event**: no event triggers in any context
$(window).on('keypress', function(e)
{
console.log("keypress"); //does nothing
});
Listening for 'scroll' event**: no event triggers in any context
$(window).scroll(function()
{
console.log("scrolling"); //does nothing
});
I'm at a loss and I haven't been able to find any clues.
I've tried my current code in a jsFiddle, and it works fine, so it must be something more specific.

instead of window try to use document so it will consider current document on web page.
in your code there is bracket miss match.
$(document).ready(function(){
$(document).keypress(function(e){
if(e.keyCode === 34){
console.log('page down')
}
});
$(document).keypress(function(e){
console.log("keypress"); //console will print
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
hope this will work for you.

Can you try also ?
$(window).bind('keydown', function(event) {
console.log(event.which === 33) });
The event.which property returns which keyboard key or mouse button was pressed for the event

Actually your syntax is incorrect you are missing a closing ) at the end of your function, you should write:
$(window).on('keydown', function(e) {
console.log(e.keyCode === 34);
});
$(window).on('keypress', function(e) {
console.log("keypress"); //does nothing
});
$(window).scroll(function() {
console.log("scrolling"); //does nothing
});
#scroll {
max-height: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="scroll">
<br>fghfjkjgfj
<br/>dfdfdfdf
<br/>dfdsf
<br/>
<br/>
<br/>dfdfdf
<br/>
<br/>
<br/>ssdsds
<br/>fdf
<br/>
<br/>
<br/>
<br/>fgfgfg
<br/>End
</div>
And everything, will work as expected.

So the element I'm trying to scroll on is a SlickGrid table, and it has its own scrolling event.
So I wrote, based on their docs:
this.grid.onScroll.subscribe(function(e, args)
{
console.log(e);
}
Now it is triggering on Page Down / Page Up key-presses.

How can i refer to a Modal Window in Dom?

I've gotten hundreds of aids from this site. thanks. This is my first question.
Which object is a modal window (alert popup) into the Dom. How can i refer it? How can i know if open or closed? Something like this: if (alertPopup is open) {..code...}
My code is this (i use jQuery):
<script type="text/javascript">
$(document).ready(function(){
var myButton = $('#mybutton')
myButton.click(function(){
if ($('#myinput').val() == '') {
alert('input Empty!');
} else {
// More code.
}
});
$(document).keyup(function(e){
if (e.keyCode == 13) myButton.trigger('click');
})
});
</script>
<body>
<input id="myinput" />
<button id="mybutton">Show alert</button>
</body>
The purpose of the code is trigger up the event 'click' on the button whith key 'enter'. It works, but when i close the popup, again with key 'enter', the popup comes again an again. I need to disable event 'click' of my button or unbind the trigger action when the popup is displayed.
I would't like to make my own modal windows.
thanks in advance.

You can move the handler to its own function and programmatically bind/unbind it to the event:
$(document).ready(function(){
var myButton = $('#mybutton')
console.log('whee');
myButton.click(clickHandler);
$(document).keyup(function(e){
if (e.keyCode == 13) myButton.trigger('click');
})
});
function clickHandler(){
$('#mybutton').unbind('click', clickHandler)
if ($('#myinput').val() == '') {
alert('input Empty!');
} else {
// More code.
}
}
However, it looks more like you're trying to deal with enter buttons in a form submission style. I'd recommend wrapping this whole thing in a form and dealing with it as such.
See http://jsfiddle.net/ruBY4/ for a cleaner form-based solution.

Select all Forms in a div and prevent the default action

I want to Display part of my website in a layover. If the user has no javascript, the layover is displayed as a normal website.
I'm getting the Website with getController and my problem occures in handleLinksAndForm.
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
This works as intended. Whenever a click on a Anchor element in Popover div happens, the default action is prevented and the new website is loaded in the popover.
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
However, this part does not work. Neither the foreach part nor the .submit().
So my Question is: Whats my mistake? If I use $("form").each(function() {... all forms are recognized, but if I add the extra selector #Popup none is recognized.
Complete Code:
function getController(ctrl,element)
{
$.get('/service/controller/' + ctrl, function(data){
handleLinksAndForm(data,element)
})
}
function getPostController(ctrl,args,element)
{
$.post('/service/controller/' + ctrl,args, function(data) {
handleLinksAndForm(data,element)
});
}
function handleLinksAndForm(data,element)
{
element.html(data);
element.prepend("<div id=\"popupClose\">x</a>");
centerPopup();
$("#popupClose").click(function(){
disablePopup();
});
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
}

You didn't provided any html code. So hard to say if isn't here more problems for example if is really element form a child of #popup.
But first try to use:
return false;
instead:
e.preventDefault();
Also you can use:
$("#Popup form") instead $("#Popup > form") it is safer way.

I just tested with the code below and I was able to locate the child element.
$("form", "#Popup").submit(function(e) {
alert("form");
...
});
N.B. This syntax also calls .find() but is slightly easier on the eyes.

Found my mistake:
I got:
<table>
<form>
<tr><td>...</td></tr>
</form>
</table>
The right way is:
<form>
<table>
...
</table>
</form>

JQuery Event for user pressing enter in a textbox?

Is there any event in Jquery that's triggered only if the user hits the enter button in a textbox? Or any plugin that can be added to include this? If not, how would I write a quick plugin that would do this?

You can wire up your own custom event
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
http://jsfiddle.net/x7HVQ/

$('#textbox').on('keypress', function (e) {
if(e.which === 13){
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
}
});

Here is a plugin for you: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/)
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
//use it:
$('textarea').pressEnter(function(){alert('here')})

heres a jquery plugin to do that
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);
to use it, include the code and set it up like this:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});
jsfiddle of it here http://jsfiddle.net/VrwgP/30/

It should be well noted that the use of live() in jQuery has been deprecated since version 1.7 and has been removed in jQuery 1.9. Instead, the use of on() is recommended.
I would highly suggest the following methodology for binding, as it solves the following potential challenges:
By binding the event onto document.body and passing $selector as the second argument to on(), elements can be attached, detached, added or removed from the DOM without needing to deal with re-binding or double-binding events. This is because the event is attached to document.body rather than $selector directly, which means $selector can be added, removed and added again and will never load the event bound to it.
By calling off() before on(), this script can live either within within the main body of the page, or within the body of an AJAX call, without having to worry about accidentally double-binding events.
By wrapping the script within $(function() {...}), this script can again be loaded by either the main body of the page, or within the body of an AJAX call. $(document).ready() does not get fired for AJAX requests, while $(function() {...}) does.
Here is an example:
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event) {
if(event.keyCode == 13) { // 13 = Enter Key
alert('enter key pressed.');
}
});
});
</script>
</head>
<body>
</body>
</html>

If your input is search, you also can use on 'search' event. Example
<input type="search" placeholder="Search" id="searchTextBox">
.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});

//Short and simple solution
$(document).ready(function(){
$('#TextboxId').keydown(function(event){
if (event.which == 13){
//body or action to be performed
}
});
});

HTML Code:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Java Script Code
function AddKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('btnEmail').click();
return false;
}
return true;
}
Your Form do not have Default Submit Button

Another subtle variation.
I went for a slight separation of powers, so I have a plugin to enable catching the enter key, then I just bind to events normally:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);
And then in use:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });
This variation allows you to use event delegation (to bind to elements you haven't created yet).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });

I could not get the keypress event to fire for the enter button, and scratched my head for some time, until I read the jQuery docs:
"The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events." (https://api.jquery.com/keypress/)
I had to use the keyup or keydown event to catch a press of the enter button.

<form name="searchForm" id="searchForm" onsubmit="doSomething(event)">
<input type="text" name="search" id="search">
</form>
<script>
function doSomething(event){
let $val = $('form#searchForm input[name="search"]').val();
console.log($val);
event.preventDefault();
}
</script>
One simple way it can be done in this way. Enter text or number, hit enter key and get the entered input value.