We Keep Coding

Switch a button depending on check box selection

I currently am building a form that has 3 checkboxes and a dynamic button that appears below.
My current issue is when you select more than one then tick off one more both the active state and deactivate state buttons appear
https://staging-homecarepulse.kinsta.cloud/demo-select/ here is my demo link
Here is the script im using
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
var arr = []
$(".mod-link:checked").each(function() {
arr.push($(this).val());
})
if ($(this).is(":checked")) {
$('#picture').attr('src', '');
} else {
$('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
}
var vals = arr.join(",")
var str = "/demo/?demo_request_type=" + vals;
var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
$('.link-container').html(link);
});
</script>
here is my html
<input type="checkbox" id="checkbox1" class="mod-link" name="selected" value="es" hidden>
<label for="checkbox1" style="cursor: pointer;">CHECK BOX styling and info HERE</label>
<div class="link-container" style="text-align:center;"></div>
<div style="text-align:center;">
<span class="result_img">
<img id="picture" src="https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg"/>
</span>
</div>
I would like to figure out how to hide the grey image button until ALL OR NO checkboxes are selected. so for short #picture should not display until ALL OR NO CHECKBOXES ARE SELECTED
Any help is appreciated

You can check arr.length earlier for showing and hiding gray button as well. Please see below code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
var arr = []
$(".mod-link:checked").each(function() {
arr.push($(this).val());
})
if (arr.length > 0) {
$('#picture').attr('src', '');
} else {
$('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
}
var vals = arr.join(",")
var str = "/demo/?demo_request_type=" + vals;
var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
$('.link-container').html(link);
});
</script>
Hope it resolve your issue.

check all input values of same class is empty jquery

Here I have many input text fields with same class like
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
My requirement is to check wheather all input fields of this class is empty or not.
I've tried this
if(!('.MyClass').val()){
alert("empty");
}
But it doesn't make any result. Can anyone help?

You can check
$('button').click(function() {
var $nonempty = $('.MyClass').filter(function() {
return this.value != ''
});
if ($nonempty.length == 0) {
alert('empty')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>
Or using a flag
$('button').click(function() {
var flag = false;
$('.MyClass').filter(function() {
if (this.value != '') {
flag = true;
//no need to iterate further
return false;
}
});
if (!flag) {
alert('empty')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>

You can compare the length of number of input with number of empty input using :
var allemptylength=$(".MyClass").filter(function() {
return this.value.length !== 0;
})});
if($('.MyClass').length== allemptylength.length){
alert("all empty");
}
Working Demo

To make sure each classes are checked, use
$.each($('.MyClass'),function() {
if ($(this).val().length == 0) {
alert('empty');
}
});

You can check it like this:
var isEmpty = !$('.MyClass').filter(function() {
return this.value.trim();
}).length;
Also remove all </input> tags. input elements are self-closable.

try this
var hasNoValue;
$('.MyClass').each(function(i) {
if ($(this).val() == '') {
hasNoValue = true;
}
});
if (hasNoValue) {
alert('All have no value');
}

try is(':checked')
$('.MyClass').each(function(){
alert($(this).is(':checked');)
});
this will alert only the checked elements.

$('input').each(function(index,value){
if($(this).val()!=''){
$(this).addClass('success');
}else{
$(this).removeClass('someClass');
$(this).addClass('warning');
$(this).css('border', '1px solid red');
//do something else...
}
});

Try this . 100% working..
var emptyLength = $(".MyClass").filter(function() {
return this.value == "";
}).length;
if (emptyLength > 0)
{
alert("Please enter all peramerter's value");
return;
}
Thanks.

Try this. It works for me
var flag = 1;
$(".MyClass").each(function(i){
if ($(this).val() == "")
flag++;
});
if (flag == 1)
alert('all have values');
else
alert('some or all doesn\'t have value');

Search Through a list By jquery (with case insensitive)

I am trying to search through the list by search box. This is my HTML:
<input type="text" id="query" value=""/>
<ol id="abbreviations" >
<li>Cars</li>
<li>bars</li>
.
.
<ol>
And this is the jQuery code I have:
<script>
var abbrs = {};
$('ol#abbreviations li').each(function(i){
abbrs[this.firstChild.nodeValue] = i;
});
$('#query').focus().keyup(function(e){
if(this.value.length >= 2){
$('ol#abbreviations li').hide();
var filterBy = this.value;
for (var abbr in abbrs) {
if (abbr.indexOf(filterBy) !== -1) {
var li = abbrs[abbr];
$('ol#abbreviations li:eq('+li+')').show();
}
}
} else {
$('ol#abbreviations li').show();
}
if(e.keyCode == 13) {
$(this).val('');
$('ol#abbreviations li').show();
}
});
</script>
My code is working perfectly, but it's case sensitive. For example if I type "Cars" it will filter the list, but if I type "cars" it doesn't work. So how can I make this jQuery search insesitive? I tried to changing var filterBy = this.value.toLowerCase();, but it won't match upper case letters. How can I make it work?

You need to convert to lowercase both the filterValue and abbr:
var filterBy = this.value.toLowerCase();
...
if (abbr.toLowerCase().indexOf(filterBy) !== -1) {
...
Also see this SO question

Easy way to remove ghost text default value on submit

The script code below makes ghost text
$('.ghost-text').each(function(){
var d = $(this).val();
$(this).focus(function(){
if ($(this).val() == d){
$(this).val('').removeClass('ghost-text');
}
});
$(this).blur(function(){
if ($(this).val() == ''){
$(this).val(d).addClass('ghost-text');
}
});
});
But on submit it passes that default ghost value. How to delete it on submit?

I believe its better to use a placeholder:
<input type="text" id="myTxt" placeholder="enter something..."/>
Or if you want to stick with your js:
if($.browser.msie){
$('.ghost-text').each(function(){
var d = $(this).attr('placeholder');
$(this).focus(function(){
if ($(this).val() == d){
$(this).val('').removeClass('ghost-text');
}
});
$(this).blur(function(){
if ($(this).val() == ''){
$(this).val(d).addClass('ghost-text');
}
});
});
$('form').submit(function(){
$('.ghost-text').each(function(){
if ($(this).val() == $(this).attr('placeholder'))
$(this).val('');
});
});
}

Have you tried something like this?
$("#submit").click(function(){
$(".ghost-text").each(function(){
$(this).val('');
}
})

var ghostTexts = $('.ghost-text');
ghostTexts.each(function(){
var $this = $(this),
d = $(this).val();
$this.on({
'focus': function(){
if ($this.val() == d){
$this.val('').removeClass('ghost-text');
}
},
'blur': function() {
if ($this.val() == ''){
$this.val(d).addClass('ghost-text');
}
}
});
});
$('yourForm').on('submit', function() {
ghostTexts.val('');
});

If you call 'ghot text' watermark and able to use HTML5, use placeholder attribute instead:
<input type="text" placeholder="My ghost text" />
If 'ghost text' as nothing to do with watermark and dont want to submit it, you can use this instead:
$('form').submit(function(){
$('.ghost-text',this).each(function(){
$(this).removeAttr('name');
});
});

"search" field to filter content

I'm trying to create a simple "search field", what it does is it searches if typed in text is equal to any data-attr of the boxes in the content and if so, hide everything but what found, something similar (this ain't working):
css:
.filter-div {
display: none;
}
html:
<label for="search">Search Input:</label>
<input type="search" name="filter" id="search" value="" />
<div class="filter-div" data-filter="one">one</div>
<div class="filter-div" data-filter="two">two</div>
<div class="filter-div" data-filter="three">three</div>
<div class="filter-div" data-filter="four">four</div>
<div class="filter-div" data-filter="five">five</div>
jquery:
// save the default value on page load
var filter = $('.input').val();
// on submit, compare
if ( $('.input').val() = $("data-filter") {
$(this).show();
} ​
I am also not sure if the content should be filtered with a button click or found content should pop up as click-able text in the search, or should all happen auto? Finally probably I will have to check it against more than one data-attr.
Anyone?

$('#search').on('keyup', function() {
var val = $.trim(this.value);
if (val) {
$('div[data-filter=' + val + ']').show();
} else $('div[data-filter]').hide();
});
Working sample
According to demo fiddle example in comment
var divs = $('div[data-filter]');
$('#search').on('keyup', function() {
var val = $.trim(this.value);
divs.hide();
divs.filter(function() {
return $(this).data('filter').search(val) >= 0
}).show();
});
divs.on('click', function() {
divs.not(this).hide();
var text = $.trim($(this).text());
$('#search').val(text);
});
Working sample

JavaScript:
var filter_div = $('[data-filter]');
$('#search').keyup(function(){
var val = $.trim(this.value);
filter_div.hide();
if(val.length == 0) return;
filter_div.filter(function(){
return $(this).data('filter').indexOf(val)>-1
}).show();
});
Fiddle: http://jsfiddle.net/iambriansreed/xMwS5/
​