Develop Reference

Input / Change / Keyup / focus event not fired

I have this function:
showReview: function(){
var main = document.getElementById("main");
var ins = main.getElementsByTagName("INPUT");
var rev = $("reviewcontent").is(":hidden");
for (var i = 0; i<ins.length; i++){
$(ins[i]).on('show input keyup focus change', this.getInVals());
console.log("Invals update from input");
}
if(!rev){
this.addReview();
}
}
The events are fired when first loading the page but not when changing the input or focus on another input again. I have no clue why. I thought about that it only listens to the last input of the main but that is not the case.

$(ins[i]).on('show input keyup focus change', this.getInVals());
remove getInVals call. try change getInVals() to getInVals
$(ins[i]).on('show input keyup focus change', this.getInVals);

I don't get what you're trying to do or to say, but I was doing something similar, you can have it as an example if it helps.
$('.look').on('keyup change', function () {
var value = $(this).val().toLowerCase();
var what_place = $(this).parents('.collapse').find('.col-sm-0');
$(what_place).each(function(){
$(this).css({"display": "block"});
if(value == ''){
$(this).css({"display": "block"});
}
else if($(this).find('h5').text().toLowerCase().indexOf(value) < 0){
$(this).css({"display": "none"});
}
});
});

Checkbox to trigger input, and vice versa

I am currently working on a form, and am required to do the following:
If the checkbox next to the input field (in this case, a qty field) is checked, then set the input to "1". If the qty field is greater than one, then the checkbox remains checked.
If the checkbox is unchecked, then the qty field is reset to 0. Alternatively, if the user inputs 0 into the qty field, then the checkbox is also unchecked
Problems
The increase button currently requires two clicks to increment the qty
When the qty field has a number > 0, and is then decreased to 0, the increase button no longer works.
Can anyone spot the error in my ways?
jQuery('.exhibitorBooking--table .desc input[type="checkbox"]').on('change', function(){
if(this.checked){
jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('1');
} else {
jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('0');
}
});
jQuery('.exhibitorBooking--table .qty-field input[type="text"]').on('change', function(){
if(jQuery(this).val() == 0){
jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', false);
} else if(jQuery(this).val() == 1) {
jQuery(this).parents('tr').find('input[type="checkbox"]').trigger('change').attr('checked', true);
} else {
jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', true);
}
});
JSFiddle

jQuery(document).ready(function() {
$('#chkStand-1-1').on('change', function() {
var value = $(this).is(':checked') ? 1 : 0;
$('.input-text').val(value);
});
$('.input-text').on('keyup', function() {
$('#chkStand-1-1').prop('checked', (parseInt($(this).val(), 10) > 0));
});
});
Demo: https://jsfiddle.net/tusharj/01s04dw4/1/

Prevent user from typing in input at max value

I'd like the user to be blocked from typing more if the value is over 100. So far I have the following from reading different posts:
$('.equipCatValidation').keyup(function(e){
if ($(this).val() > 100) {
e.preventDefault();
}
});
To confirm I want the value not the string length, and it can't be above 100.
However this is not preventing further input in the field. What am I missing.

Checking keyup is too late, the event of adding the character has already happened. You need to use keydown. But you also want to make sure the value isn't > 100 so you do need to also use keyup to allow js to check the value then too.
You also have to allow people to delete the value, otherwise, once it's > 100 nothing can be changed.
<input class="equipCatValidation" type="number" />
When using input type="number", change also needs to be on the event list.
$('.equipCatValidation').on('keydown keyup change', function(e){
if ($(this).val() > 100
&& e.keyCode !== 46 // keycode for delete
&& e.keyCode !== 8 // keycode for backspace
) {
e.preventDefault();
$(this).val(100);
}
});
http://jsfiddle.net/c8Lsvzdk/

Basically keypress events are fired before accepting the current value. So when you press on any key, keypress event is subscribed but you don't get the updated value/result for the recently pressed key. So, to get the last pressed key we can use the fromCharCode method and concat it with the value we got from the textbox. That's it,
HTML :
<input id="inputBox" type="text" />
jQuery :
$("#inputBox").on("keypress", function(e){
var currentValue = String.fromCharCode(e.which);
var finalValue = $(this).val() + currentValue;
if(finalValue > 100){
e.preventDefault();
}
});
jsFiddle

Maybe keydown instead of keyup?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$('.equipCatValidation').keydown(function(e){
if ($(this).val() > 100) {
e.preventDefault();
}
});
})
</script>
</head>
<body>
<input type="text" class="equipCatValidation">
</body>
</html>
EDIT: There is a valid comment here - Prevent user from typing in input at max value - to circumvent that you should probably store the previous value and restore it when necessary.

It is bad UI to disable the input if a user inputs a bad value. I'm assuming you simply want to put a max value that the user cannot go over. If so, you can either clamp the value, or use the max attribute in your markup:
<form>
<input type='number' max='100'>
</form>
If you input an invalid value, the input will turn red, and you cannot submit the form.

<input class="equipCatValidation" />
var maxValue = 100;
jquery
$('.equipCatValidation').on('keypress', function(e){
/* preventing set value when it doesn't pass conditions*/
e.preventDefault();
var input = $(this);
var value = Number(input.val());
var key = Number(e.key);
if (Number.isInteger(key)) {
value = Number("" + value + key);
if (value > maxValue) {
return false;
}
/* if value < maxValue => set new input value
in this way we don't allow input multi 0 */
$element.val(value);
}
});
vanilla js
document.querySelector(".equipCatValidation")
.addEventListener("keypress", function(e) {
e.preventDefault();
var input = e.target;
var value = Number(input.value);
var key = Number(e.key);
if (Number.isInteger(key)) {
value = Number("" + value + key);
if (value > maxValue) {
return false;
}
input.value = value;
}
});
example
addition to the this answer

$('.equipCatValidation').on('keypress', function(e){
var $element = $(this);
var value = Number($element.val());
var key = Number(e.key);
if (Number.isInteger(key)) {
value = Number("" + value + key);
}
if (value > 100) {
return false;
}
});

Here's a solution for those using modern vanilla Javascript:
Just snap the value back down to the max when the user focuses away from the input.
You would set the input to a number type and the max value
<input type="number" max="100">
and then add a function to the onblur method of the element
document.querySelector('input[max]').onblur = function (event) {
// If the value is less than the max then stop
if (Number(event.target.value) < event.target.max) return
// Snap the value to the max
event.target.value = event.target.max
}
You can also use oninput instead of onblur but that may cause the user to have to fight the input in certain situations.
Example

jQuery problems with function

What i'm trying to do here is if the selection is equal to value 10 the click function to be available only if selection is equal to 10. But when i change to other ex. category with different value the radio click function is still available. ?
I have 6 radio boxes with value 1,2,3,4,5,6 so what i want to do if value == 4 to slidedown another div while i'm in category with value 10.(selection).
How can i fix this problem ? Here is my sample code.
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
if(selection == '10'){
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown'+selection).slideUp();
} else {
$('#slidedown'+selection).slideDown();
}
});
});
Thanks, any help will be appreciated.
EDIT : I want to slideUp the currect div which is slided down by the category value if radio box with value 4 is checked.

You should have another selection var inside the click callback:
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
});
$("input:radio[name='checkbox']").click(function() {
var selection = $('#category').val(); //This does the trick
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Also, callbacks must be separated for not binding a new listener each time
Hope this helps. Cheers

Use the disabled property to enable and disable the radio buttons.
$('#category').change(function() {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
$('input:radio[name=checkbox]').prop('disabled', selection != '10');
});
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Your code is adding a handler when the select has the correct value, but it never removes the handler when the select changes to a different value. Also, every time they select 10 it was adding another handler, so the handler would then run multiple times.

limit checkbox and uncheck after changing tab

I am trying to show and hide divs with select tag. In the divs there are check boxes which has a logic of disabling them after the user checked 2. When I am changing the divs the checkboxes are staying disabled. For some reason the max 2 checkbox logic is disabling all the checkboxes.
Here is the fiddle
http://jsfiddle.net/sghoush1/yJCYW/
The Jquery looks somewhat like this
$('.selectOption').change(function(){
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
var max = 2;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if(current >= max){
$('.resourceMsg').show();
} else{
$('.resourceMsg').hide();
}
});

Just uncheck the checkboxes and set the disabled property to false whenever the select element is changed:
$(function () {
var max = 2;
var checkboxes = $('input[type="checkbox"]');
$('.selectOption').change(function () {
checkboxes.prop({
'disabled': false,
'checked': false
});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
checkboxes.change(function () {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if (current >= max) {
$('.resourceMsg').show();
} else {
$('.resourceMsg').hide();
}
});
});
jsFiddle example

You have no code to enable them.
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
This will disable all unchecked checkboxes on the page, and not just those in the currently displayed div.
You need to reconsider what should occur upon the selection change; you either need to throw away existing selections or re-enable checkboxes (effectively the same thing):
$('.selectOption').change(function(){
$('.descContent').find(':checked,:disabled').prop({checked: false, disabled: false});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
Alternatively, you could just disable the checkboxes in the current div.
checkboxes.change(function() {
var content = $(this).parents('.descContent');
var current = content.find(':checked').length;
content.find(':not(:checked)').prop('disabled', current >= max);
// ...
}