We Keep Coding

See if check box is clicked until it is clicked

I am seeing how I can make an Are You Human checkbox, but I am having a problem (Code At The End). I am trying to make it see if it is clicked until it is clicked. I tried onclick, but that is not working.
window.onload = function() {
var input = document.getElementById('ruhuman');
function check() {
if (input.checked) {
ruhuman.checked = true;
if (event.originalEvent === undefined) {
ruhuman.human = false;
} else {
ruhuman.human = true;
}
}
alert(ruhuman.human);
alert(ruhuman.checked);
}
input.onchange = check;
check();
}
<input type="checkbox" id="ruhuman" class="ruhuman" onclick="check()" required="required">
<label>R U Human?</label>
Edit: Thanks for your help! Finished product at http://ruhuman.github.io/.
To the people that answered I can put your github for your help!

originalEvent is JQuery, not JavaScript. A workaround is to test screenX and screenY -- if it's a human, these will have some value based on the checkbox position. Also, you can remove the onclick from your html and tie your click event like this:
document.getElementById ("ruhuman").addEventListener("click", function(e){
if (this.checked) {
ruhuman.checked = true;
if (e.screenX && e.screenY) {
ruhuman.human = true;
} else {
ruhuman.human = false;
}
}
console.log(ruhuman.human);
console.log(ruhuman.checked);
});
JS Fiddle Demo

This works: https://jsfiddle.net/rz4pmp5L/3/
var input = document.getElementById('ruhuman');
var ruhuman =
{
checked: false
};
function check()
{
if (input.checked)
{
ruhuman.checked = true;
}
alert(ruhuman.checked);
}
input.onchange = check;
check();
The problem was (at least) that ruhuman was not defined at all.

How to disable and enable Div element?

Can any one please tell me how to disable the following div?
<div class="continue-but submit">Submit</div>
I have tried
$('.submit').click(function () {
$(".submit").prop('disabled', true);
if (error >= 1) {
// Errors
$(".submit").prop('disabled', false);
return false;
}
};
But there was no change. Can any one please help me?
Thanks.

You can update your code to following
$('.submit').click(function () {
var obj = $(this);
obj.prop('disabled', true);
var originalonClick = obj.onclick; // storing current click handler
obj.onclick = function(){return false}; // updating click handler
if (error >= 1) {
// Errors
$(".submit").prop('disabled', false);
obj.onclick = originalonClick; // restoring click function
return false;
}
};

You need to use preventDefault(); function, which ensures that click event will cancel out when you return false:
$('.submit').click(function (e) {
e.preventDefault();
$(".submit").prop('disabled', true);
if (error >= 1) {
// Errors
$(".submit").prop('disabled', false);
return false;
}
};

JS: How to detect whether cursor is in textfield

I want to use some letters ( keys ) as shortcut for some actions in javascript. I want to check whether the cursor is focused on any textfield, form input, etc. so that the shortcut action will be canceled when user is typing something in a form or textfield.
For example, i want an alert() to be executed when user presses 'A'. But if the user is typing some text in a textarea like 'A website' then he will be pressing 'A', this time alert() should not be executed.

$(document).keydown( function( e ) {
if( e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA" ) return;
if( e.target.isContentEditable ) return;
// Do stuff
}

window.onkeydown = function(e){
if ( e.target.nodeName == 'INPUT' ) return;
handle_shortcut();
};

jQuery
$(window).bind('keydown',function(e){
if(e.target.nodeName.toLowerCase() === 'input'){
return;
}
alert('a');
});
or pure js
window.onkeydown = function(e){
if(e.target.nodeName.toLowerCase() === 'input'){
return;
}
alert('a');
};
What you can do in addition to this is define an array of non-alert element types, so input, textarea etc and then check none of those elements are currently the target.
Demo: http://jsfiddle.net/7F3JH/

You can bind and unbind the shortcut events depending on which element currently has focus on your page.
JavaScript
window.onload = initWindow();
function initWindow () {
attachShortcutHandler();
var inputs = document.getElementsByTagName('input');
for (var i = 0, max = inputs.length; i < max; i++) {
inputs[i].onfocus = removeShortcutHandler;
intputs[i].onblur = attachShortcutHandler;
}
}
function removeShortcutHandler () {
window.onkeypress = null;
}
function attachShortcutHandler() {
window.onkeypress = function () {
//your code here
}
}
jQuery
$(function () {
initShortcutHandler();
$('input, [any other element you want]')
.on('focus', function () {
$('body').off('keypress');
})
.on('blur', function () {
initShortcutHandler();
});
});
function initShortcutHandler() {
$('body').on('keypress', function () {
//do your stuff
});
}

jQuery mouseover()
$('element').mouseover(function() {
alert('over');
});

you need to make a flag as global. and set it false when any textbox has focus.
var flag = true;
$('input:type="text").focus(function(txt) {
flag= false; });
if(flag) //shortcut keys works...

Better use the focusOut method defined in JQuery. As per my understanding you can do something like this
$("input").focusout(function() {
if($(this).val() == "A"{
alert("your message");
return false;
}else{
//do other processing here.
}
});
Hope this helps :)

Cancel click handler from mousedown handler

I’m trying to prevent a click handler from firing based on a condition inside the mousdown handler for the same element. Consider this:
var bool = true;
$('button').click(function() {
console.log('clicked');
}).mousedown(function(e) {
bool = !bool;
if ( bool ) {
// temporary prevent the click handler, how?
}
});
Is there a neat way to cross-communicate between handlers? Here is a bin: http://jsbin.com/ipovon/1/edit

This works, although, I'm not sure it's quite the answer you were looking for. It's basically a double click function, if you set bool=false; initially.
var bool = true;
$('button').mousedown(function(e) {
bool = !bool;
if ( bool ) {
$(this).unbind('click');
}
else
{
$(this).click(function(){
console.log('clicked');
});
}
});
Update
Also, you could pull the click function out of the mousedown like this, if you like:
var bool = true;
function buttonClick(){
console.log('clicked');
}
$('button').mousedown(function(e) {
bool = !bool;
if ( bool ) {
$(this).unbind('click');
}
else
{
$(this).click(buttonClick);
}
});

jQuery hover on the same element

With jQuery hover how do you check if you've just hovered on the same element again? Say I have two boxes and hover on box 1, then left, then come back and hover on that same box. I'd like to store the value of the initial hovered element (box 1) and then compare if it's the same when hovering back.
Thanks!!

Try something like below,
var lastHovered = '';
$('#box1').hover(function () {
if (lastHovered == 'box1') {
alert('You have hovered on this already');
}
lastHovered = 'box1';
//Your stuff
}, function () {
//mouse out stuff
});
$('#box2').hover(function () {
if (lastHovered == 'box2') {
alert('You have hovered on this already');
}
lastHovered = 'box2';
//Your stuff
}, function () {
//mouse out stuff
});
Note: I have used 2 functions assuming that box1 hover and box2 hover has totally different functionalities... If not you can have it inside same function and use this.id to group them.. see below.
var lastHovered = '';
$('#box1, #box2').hover(function () {
if (lastHovered == this.id) { //<-- used this.id instead of hard-coded value
alert('You have hovered on ' + this.id + ' already');
}
lastHovered = this.id; //<-- used this.id instead of hard-coded value
//Your stuff
}, function () {
//mouse out stuff
});

Use .data() http://api.jquery.com/data/ so on first hover in the callback do something like
if (!$(this).data('var')) {
$(this).data('var','value');
} else {
console.log($(this).data('var'));
};

var lastHovered = null;
$('#selector1,#selector2,#selector3').hover(function (evt) {
if(lastHovered && lastHovered === $(this).attr("id")){
//code for 're-hovering'
}else{
//code for 'new hover'
}
}, function (evt) {
//mouse out stuff
lastHovered = $(this).attr("id");
});