Develop Reference

Enabling a button when 2 select tag has been selected

I am doing a verification button. I have a button that is initially in disabled state. And i have three elements as the button enabler. 1 is input tag, 1 is select tag and another 1 is select tag. When those 3 is filled and selected, the button should be enabled and back to disabled again when one or all of the elements is back to blank.
This is what ive done so far and it doesnt work. Please help me
$(window).load(function(){
$("#devicemask").on('keyup blur', function(){
$('#set-sr-property').prop('enabled', this.value.trim().length);
});
$('#flightselect').change(function() {
var op =$(this).val();
if(op ! = '') {
$('#set-sr-property').prop('disabled',false);
} else {
$('#set-sr-property').prop('disabled', true);
}
});
$('#crewselect').change(function() {
var op =$(this).val();
if(op ! = '') {
$('#set-sr-property').prop('disabled',false);
} else {
$('#set-sr-property').prop('disabled', true);
}
});
});

You need to check each value between each event. Basically will be look like this.
var input = $('#devicemask');
var select1 = $('#flightselect');
var select2 = $('#crewselect');
var button = $('#set-sr-property');
input.on('keyup blur', function(){
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
select1.change(function() {
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
select2.change(function() {
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
You sure can simplifize it. Sample fiddle https://jsfiddle.net/phv5yty8
Anyways, I tried to wrap it inside $.load() but doesn't work. I don't know why. So $.ready() may fit on this.

jQuery Multi-Select Listbox where 'None' Option Deselects All Others

Fiddle here: https://jsfiddle.net/q0o11c5e/17/
I have a Multi-Select Listbox with 'None' with the following requirements:
Selecting 'None' included anywhere in the selection => only 'None'
is selected (anything else is turned off)
Deselecting any other item
with Ctrl+click, if nothing else is selected, will automatically
select 'None'.
This is implemented with jQuery's Change function. My issues:
1) First of all, for #2 (Full Ctrl+click deselection): the flow doesn't come into the $( "#listbox" ).change(function() at all. You can see that because if you select 'A' and then deselect it with Ctrl+click, the Alert at the top of the function isn't displayed.
2) For #1, if the selection includes 'None' (value '') anywhere, I create a blank array, push '' onto it, and set the Listbox Val to it (and break immediately), but that doesn't work.
$( "#listbox" ).change(function() {
alert('SelArray: ' + $('#listbox').val() + ' Length: ' + $('#listbox').val().length);
// If no selection, automatically select 'None'
if ($('#listbox').val().length == 0) {
alert('Nothing selected');
}
else
{
// If new selection includes empty ('None'), deselect any other active selections
$.each($('#listbox').val(), function (index, value) {
if (value == '') {
alert('None selected, clearing anything else..');
var noneOnly = {};
noneOnly.push('');
$('#listbox').val(noneOnly);
return false;
}
});
}
});

If I get the intention correctly, something like the below?
$( "#listbox" ).change(function() {
var arr= $(this).val();
if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === ''))
$(this).val(['']);
});
This simply sets the selection whenever no value is selected or when multiple values are selected including 'none'
Fiddle

$("#listbox").on("input change", function() {
if($(this).find("option[value='']:selected").length!=0 || $(this).find("option:selected").length==0) {
$(this).find("option").attr("selected", false);
$(this).find("option[value='']").attr("selected", true);
return false;
}
});
hi, check my above piece of code, this is my try https://jsfiddle.net/q0o11c5e/22/

(Posted on behalf of the question author).
This is solved now, final fiddle here: https://jsfiddle.net/q0o11c5e/23/
JS code:
$( "#listbox" ).change(function() {
var arr= $(this).val();
if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === '')) {
$(this).val(['']);
}
else
{
// If new selection includes empty ('None'), deselect any other active selections
$.each(arr, function (index, value) {
if (value == '') {
var noneOnly = [];
noneOnly.push('');
$('#listbox').val(noneOnly);
return false;
}
});
}
});

Checkbox is still showing true when unchecked jQuery

Ok, so I'm currently having an issue with the $.prop('checked') functionality. When unchecking some of my boxes, and using this function to read the checkboxes, all of them are still showing up as true when some of them should be showing up as unchecked. The part of the function that checks this is below, but some background: I'm using a table with input values in each td element and due to the way it's written, I'm having to gather all the info / validate / and check by using a td.each() function.
$("td", ele).each(function(idx){
var before = $('.e_content', this),
b_name = $('input:last[type!="hidden"], textarea:last, checkbox:last, select:last', this).attr('name'),
b_val = $('input[name="'+b_name+'"], select:last, textarea[name="'+b_name+'"]', this).val(),
b_chx = $('input:checkbox[name="'+b_name+'"]', this).prop('checked'),
after = function(){
before.hide();
$(ele).css("background", color);
$('td.edit', ele).show();
$('td.save', ele).hide();
$('span', this)
// WORKING ON TAKING THE VALUE OF THE .e_content FORM AND REPLACING THE SPAN WITH IT
.html(function(){
console.log(b_name+' : '+b_chx);
if(b_val != undefined && b_val != ''){
if(b_name == 'StageType'){
if(b_val == 1){ return 'Voice'; }
if(b_val == 2){ return 'Text'; }
if(b_val == 3){ return 'Email'; }
}
else if(b_name == 'qtrhour') {
return $('select', before).find(':selected').text();
}
else if(b_chx == true) { return '✓'; }
else if(b_chx == false) { return '✗'; }
else {
if(before.find('input:last').prop('type') != 'checkbox')
return b_val.replace(/\n\r?/g, '<br />');
}
}
})
.show();
};
$(this).html(after);
});
The problem is with this line:
b_chx = $('input:checkbox[name="'+b_name+'"]', this).prop('checked'),
It's coming up always as true even when the checkbox has been unchecked before the save button is hit. This function fires on the .save click event. Hopefully this is enough to determine what might be going wrong.

You can try the following,
$('input:checkbox[name="'+b_name+'"]', this).is(':checked');

To avoid issues regarding to checking or unchecking checkboxes, I normally use jQuery.attr()
$(...).attr('checked')
$(...).attr('checked','checked')
$(...).removeAttr('checked')
Also sometimes I check or uncheck them binding or triggering a .click() function.

How do I get the value of a hidden field using jQuery?

I have the following generic code to get hidden fields. If the hidden GUID is null, I show an error.
$.validator.addMethod("isNotEmptyGuidtest", function (value, element, params) {
debugger;
var val = $.trim($(params[0]).val())
if (val.length > 0) {
if (val == "00000000-0000-0000-0000-000000000000") {
if ($(element).hasClass("notRequired") && $.trim(value).length == 0)
return true;
else
return false;
}
else {
return true;
}
}
}, $.format("Incorrect {1}"));
However, var val = $.trim($(params[0]).val()) is not always giving me hidden field value. I don't know why. Please guide me to get the correct value of hidden fields.

Remove ignore:hidden from your validations(If you have) then it will work for the hidden fields also

Cycle Focus to First Form Element from Last Element & Vice Versa

I have created a form with malsup's Form Plugin wherein it submits on change of the inputs. I have set up my jQuery script to index drop down menus and visible inputs, and uses that index to determine whether keydown of tab should move focus to the next element or the first element, and likewise with shift+tab keydown. However, instead of moving focus to the first element from the last element on tab keydown like I would like it to, it moves focus to the second element. How can I change it to cycle focus to the actual first and last elements? Here is a live link to my form: http://www.presspound.org/calculator/ajax/sample.php. Thanks to anyone that tries to help. Here is my script:
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
};
$('#calculator').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
$(this).focusin(function(event) {
var shiftDown = false;
$('input, select').each(function (i) {
$(this).data('initial', $(this).val());
});
$('input, select').keyup(function(event) {
if (event.keyCode==16) {
shiftDown = false;
$('#shiftCatch').val(shiftDown);
}
});
$('input, select').keydown(function(event) {
if (event.keyCode==16) {
shiftDown = true;
$('#shiftCatch').val(shiftDown);
}
if (event.keyCode==13) {
$('#captured').val(event.target.id);
} else if (event.keyCode==9 && shiftDown==false) {
return $(event.target).each(function() {
var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
var index = fields.index(this);
var nextEl = fields.eq(index+1).attr('id');
var firstEl = fields.eq(0).attr('id');
var focusEl = '#'+firstEl;
if (index>-1 && (index+1)<fields.length) {
$('#captured').val(nextEl);
} else if(index+1>=fields.length) {
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(firstEl);
} else {
event.preventDefault();
$(focusEl).focus();
}
}
return false;
});
} else if (event.keyCode==9 && shiftDown==true) {
return $(event.target).each(function() {
var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
var index = fields.index(this);
var prevEl = fields.eq(index-1).attr('id');
var lastEl = fields.eq(fields.length-1).attr('id');
var focusEl = '#'+lastEl;
if (index<fields.length && (index-1)>-1) {
$('#captured').val(prevEl);
} else if (index==0) {
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(lastEl);
} else {
event.preventDefault();
$(focusEl).select();
}
}
return false;
});
}
});
});
});
function setFocus() {
with (document.calculator)
var recap = document.getElementById(recaptured.value);
if (recap!=null) {
setTimeout(function() {
if (recap.getAttribute('type')=='text') {
recap.select();
} else {
recap.focus();
}
}, 100 );
}
}
Edit #1: I made a few minor changes to the code, which has brought me a little closer to my intended functionality of the script. However, I only made one change to the code pertaining to the focus: I tried to to disable the tab keydown when pressed on the last element (and also the shift+tab keydown on the first element) in an attempt to force the focus on the element I want without skipping over it like it has been doing. This is the code I added:
$(this).one('keydown', function (event) {
return !(event.keyCode==9 && shiftDown==true);
});
This kind of works. After the page loads, If the user presses tab on the last element without making a change to its value, the focus will be set to the second element. However, the second time the user presses tab on the last element without making a change to its value, and every subsequent time thereafter, the focus will be set to the first element, just as I would like it to.
Edit #2: I replaced the code in Edit #1, with code utilizing event.preventDefault(), which works better. While if a user does a shift+tab keydown when in the first element, the focus moves to the last element as it should. However, if the user continues to hold down the shift key and presses tab again, focus will be set back to the first element. And if the user continues to hold the shift key down still yet and hits tab, the focus will move back to the last element. The focus will shift back and forth between the first and last element until the user lifts the shift key. This problem does not occur when only pressing tab. Here is the new code snippet:
event.preventDefault();
$(focusEl).focus();

You have a lot of code I didn't get full overview over, so I don't know if I missed some functionality you wanted integrated, but for the tabbing/shift-tabbing through form elements, this should do the work:
var elements = $("#container :input:visible");
var n = elements.length;
elements
.keydown(function(event){
if (event.keyCode == 9) { //if tab
var currentIndex = elements.index(this);
var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n;
var el = elements.eq(newIndex);
if (el.attr("type") == "text")
elements.eq(newIndex).select();
else
elements.eq(newIndex).focus();
event.preventDefault();
}
});
elements will be the jQuery object containing all the input fields, in my example it's all the input fields inside the div #container
Here's a demo: http://jsfiddle.net/rA3L9/

Here is the solution, which I couldn't have reached it without Simen's help. Thanks again, Simen.
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
};
$('#calculator').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
$(this).focusin(function(event) {
$('#calculator :input:visible').each(function (i) {
$(this).data('initial', $(this).val());
});
return $(event.target).each(function() {
$('#c_main :input:visible').live(($.browser.opera ? 'keypress' : 'keydown'), function(event){
var elements = $("#calculator :input:visible");
var n = elements.length;
var currentIndex = elements.index(this);
if (event.keyCode == 13) { //if enter
var focusElement = elements.eq(currentIndex).attr('id');
$('#captured').val(focusElement);
} else if (event.keyCode == 9) { //if tab
var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n;
var el = elements.eq(newIndex);
var focusElement = el.attr('id');
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(focusElement);
} else if ((currentIndex==0 && event.shiftKey) || (currentIndex==n-1 && !event.shiftKey)) {
event.preventDefault();
if (el.attr('type')=='text') {
$.browser.msie ? "" : $(window).scrollTop(5000);
el.select().delay(800);
} else {
$.browser.msie ? "" : $(window).scrollTop(-5000);
el.focus().delay(800);
}
} else if (el.is('select')) {
event.preventDefault();
if (el.attr('type')=='text') {
el.select();
} else {
el.focus();
}
}
}
});
});
});
});
function setFocus() {
with (document.calculator)
var recap = document.getElementById(recaptured.value);
if (recap!=null) {
setTimeout(function() {
if (recap.getAttribute('type')=='text') {
recap.select();
} else {
recap.focus();
}
}, 1 );
}
}
I put my files available to download in my live link: http://www.presspound.org/calculator/ajax/sample.php