Develop Reference

Button is being disabled due to hidden select elements

I have a form with three select options:
Fit
Colour
Size
By default, the 'Fit' dropdown and 'Colour' dropdown are active with a default value selected (e.g. Regular Fit and Blue Colour).
There are three different 'Size' dropdowns, but only one is visible at any time depending on what is selected from the 'Fit' dropdown.
The Button is disabled if an option value="none".
Problem
The Button only becomes active if all three 'Size' dropdowns are altered so that their value is not "none" (this is done by selecting an initial size for Regular, and then selecting Petite and Long from the 'Fit' dropdown). Ideally, I only want the button to take into account the 'Size' dropdown that is active.
Update
Working jsFiddle solution provided by #nagappan below, big thanks.
https://jsfiddle.net/dodgers76/c0dvdwbz/
var currentSelectedVals = {'selector-fit':'','selector-color':'','selector-sizes':''};
var disableComboVals = [
{'selector-fit':'','selector-color':'','selector-sizes':'none'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'10'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'20'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'22'},
{'selector-fit':'petite','selector-color':'','selector-sizes':'24'},
{'selector-fit':'long','selector-color':'','selector-sizes':'22'},
{'selector-fit':'long','selector-color':'','selector-sizes':'24'}
];
function checkDisableCombo() {
return $.grep(disableComboVals, function(vals){
cnt = 0;
$.each(vals, function(key,val) {
console.log('comparing key val '+key+val);
if (val === '' || val === currentSelectedVals[key]) {
console.log('>>matched values');
cnt = cnt + 1;
}
});
if (cnt===3) {
return true;
}
return false;
});
};
$(function(){
var sizeVal = 'none';
$("select.selector-fit").on("change", function(){
//remove active
$("select.selector-sizes.active").removeClass("active");
//check if select class exists. If it does then show it
var subList = $("select.selector-sizes."+$(this).val());
if (subList.length){
//class exists. Show it by adding active class to it
subList.addClass("active");
subList.val(sizeVal);
}
});
$('.selector-sizes').on('change', function() {
sizeVal = $(this).val();
});
});
$(function() {
$('.selector').on('change', function() {
var $sels = $('option.selector-sizes:selected[value="none"]');
var isSizeSelector = jQuery.inArray( "selector-sizes",this.classList);
currentSelectedVals[this.classList[1]] = this.value;
console.log(currentSelectedVals);
var result = checkDisableCombo();
console.log(result);
if ( result.length > 0) {
console.log('disabled false');
$("#Testing").attr("disabled", true);
} else {
$("#Testing").attr("disabled", false);
}
}).change();
});

If we want to disable the button by combination of the drop down selected values. We can have a global variable to track the current selected values from three drop downs. Only we can have array of disbale combos. So whenever user select a value we cross check with disable combos and if it matches we can disable the button. Validate the combo can be done as below. Updated the jsfiddle link. JS FIDDLE UPDATED
function checkDisableCombo() {
return $.grep(disableComboVals, function(vals){
cnt = 0;
$.each(vals, function(key,val) {
console.log('comparing key val '+key+val);
if (val === '' || val === currentSelectedVals[key]) {
console.log('>>matched values');
cnt = cnt + 1;
}
});
if (cnt===3) {
return true;
}
return false;
});

Changing required field dynamicly via JS in Contact Form 7

I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}

Reset button for JQuery table row filter

I have a table on my page, and a filtering text box above it that works fantastic, using the following JQuery:
$("#searchInputCompanies").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#cBody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function(i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.text().toLowerCase().indexOf(data[d].toLowerCase()) > -1) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
$('#selectAllCompanies').prop('checked', '');
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
How can I set up a Reset Filter button for this?

Uhh, this is quite a bad implementation :(
First, you need to change the event for $("#searchInputCompanies") to make it all a bit easier. So, it will become $("#searchInputCompanies").on("input", function() {...
$("#resetAction").on("whatEventYouWant", function() {
$("#searchInputCompanies").val("").trigger("input");
});
This will trigger input event on $("#searchInputCompanies") and because the text box is empty all rows will become visible.

show div when all input fields have content

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/

Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});

You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/

Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});

Merging 4 similar click functions into one

Here are 4 functions I use to improve the usability of a table by:
If cell contains a checkbox and you click outside of a checkbox
The the tr contains data-url then the whole row is "clickable"
with CSS hover effect and redirects on click.
If the last column in the table contains a relative/absolute URL
then also redirects on click.
Check all checkboxes.
Here's my code:
// Click table cell auto check checkbox
$('table tr td').has("input[type=checkbox]").click(function(event) {
// Onl call this if click outside of the checkbox itself
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
// Table row click
$('table tr[data-url]').each(function(){
var url = $(this).attr("data-url");
if(url.length){
$(this)
.addClass("clickable")
.find("td").click(function(){
window.location = url;
return false;
});
}
});
// Double click row, open edit link
$('table:not(.noDoubleClick) tr td').dblclick(function(e) {
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
// Check all checkboxes
$('table input[type=checkbox][name^="checkall"]').live("click",function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
Q: how can I modify this into one function so that jquery only has to search for tables once?
Example jsfiddle
Thanks for every bodies suggestions I have ended up taking a slightly different approach:
$('table').each(function(){
var $table= $(this), $cell, $row;
// TABLE ROWS
$table.find('tr').each(function(){
$row = $(this);
// Row click redirect to data-url
var url = $row.attr("data-url");
if(url && url.length){
$row.addClass("clickable").find("td").click(function(){
window.location = url;
return false;
});
}
// TABLE HEADING CELLS
$row.find('th, thead td').each(function(){
$cell = $(this);
// Check all checkboxes
$cell.find('input.checkall').live("click",function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});
});
// TABLE CELLS
$row.find('td').each(function(){
$cell = $(this);
// Check checbox onClick
if($cell.find("input[type=checkbox]")){
$cell.click(function(e) {
if(e.target.type !== 'checkbox') $(':checkbox', this).trigger('click');
});
}
// Double click open edit link
if(!$table.hasClass("noDoubleClick")){
$cell.dblclick(function(e){
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(linkElHref && (!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0)){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
}
}); // end CELLS
}); // end ROWS
}); // end TABLE

You should use .on , .live is being deprecated:
$(document).on('click', 'table tr td', function(event)
{
if( $(this).has("input[type=checkbox]"))
{
if (event.target.type !== 'checkbox')
$(':checkbox', this).trigger('click');
}
});
// Table row click
$(document).on('click', 'table tr[data-url] td', function(e)
{
var url = $(this).parent().attr("data-url");
if(url.length)
{
window.location = url;
return false;
}
});
$(document).on('dblclick', 'table:not(.noDoubleClick) tr td', function(e) {
debugger;
var linkEl = $(this).parents('tr').find('td:last-child a');
var linkElHref = linkEl.attr('href');
// Check if has href and http protocol
if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
e.preventDefault();
return false;
}
if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
document.location = linkElHref;
} else {
linkEl.click();
}
});
// Check all checkboxes
$(document).on('click', 'table input.checkall', function() {
var parent = $(this).parents('table');
if(!$(this).parents('table').length){
parent = $(this).parents("form");
}
parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});​

I have made the basic stubs here, i dont want to rewrite all your code.
$(document).ready(function(){
$('table').each(function(){
var table = $(this);
table.find('tr').each(function (){
var tr = $(this);
tr.find('td').each(function(){
var td = $(this);
td.has("input[type=checkbox]").click(function(event) {
// Only call this if click outside of the checkbox itself
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
});
});
});
​
The logic is: Find all tables, loop through all the tr's and then the td's. I've did your first function and hope that explains how it could be used?
​

The best thing to do in this case is to:
Get all of the tables in the page
Loop through each table
Find and apply logic to the individual elements as needed
$('table').each(function(){
var table = $(this),
rows = table.find('tr[data-url]'),
cells = table.find('td'),
all = table.find('input[type=checkbox][name^="checkall"]'),
edit = table.is('.noDoubleClick');
cells.each(function(){
//Apply your logic here
if(edit === true){
//Apply your logic to this cell here
}
});
rows.each(function(){
//Apply your logic to this row here
});
all.on('click',function(){
//Apply your logic here
});
});