I have four div with class name .s-list. When the user clicks on any of those divs .selected class is applied on the div.
What I am trying to do is while clicking on a button, check all those divs and if any one of them has a class .selected submit a form, else if none of the div has a class .selected show a error message.
The problem:
It works for the first time, but again if I click the button it shows the error message and submit the form when the div already has the class selected.
$("#pp-btn").click(function() {
$(".s-list").each(function (i) {
if(!$(this).hasClass('selected'))
{
$("#p-msg").show();
}
else {
$("#plans-form").attr('action', $(this).attr('links'));
$("#p-msg").hide();
}
});
});
I don't want the message to be displayed if any 1 of the div has class 'selected'.
Help please...
Use a jQuery selector to check if any s-list element has a selected class;
$('#pp-btn').click(function (e) {
if ($('.s-list.selected').length == 0) {
/* No `selected` class on any `s-list` */
$('#p-msg').show();
} else {
/* At least one `s-list` has the additional `selected` class */
$('#plans-form').attr('action', $('.s-list.selected').attr('links'));
}
});
$("#pp-btn").on('click',function() {
if($(".s-list.selected").length){
//there are selected items
} else {
//there is none
}
});
You could check like this :
if ($(".s-list.selected").length == 0) { $("#p-msg").show(); }
else {
$('#plats-form').attr('action', $('.s-list.selected').attr('links'));
$("#p-msg").hide();
}
$("#pp-btn").click(function() {
var submit = false;
$(".s-list").each(function (i) {
if($(this).hasClass('selected')) {
submit = true;
}
});
if(submit) {
$("#p-msg").show();
} else {
$("#plans-form").attr('action', $(this).attr('links'));
$("#p-msg").hide();
}
});
Related
Context:
I have a gallery of images. The user can select each image, when they click it, the "selected" attribute is added to the individual element and a new class is added to their chosen image.
The thing is, I want to limit this to only 2 selections being available.
I want to edit my script to only run up until the length is 2 or less. If the length reaches 2, no more Selected attributes to be added and no more class changes to be toggled.
I feel like I'm close. Right now my users can select/deselect but they can just do it too many times. Where am I going wrong?
function NFTSelector() {
$("#NFTGallery2 > img").each(function() {
$(this).on("click", function() {
if($(this).filter("[selected]").length>=2) {
alert('true');
} else
console.log("less than 2 or undefined so letting them choose more");
{
$(this).toggleClass('chosenNFT');
if ($(this).attr('selected')) {
$(this).removeAttr('selected');
} else {
$(this).attr('selected', 'selected');
}
}
})
});
}
I changed my approach, I instead set it up as checkboxes and limited the checkboxes this way
function NFTSelector() {
var limit = 3;
$('#NFTGallery2 > li > input').on('change', function(evt) {
if($('#NFTGallery2 > li > input:checked').length >= limit) {
this.checked = false;
}
});
}
i have view containing four radio button and two button.
i have written code on click of button , but i want to check condition of radio button before button click but not able to find any idea how to do
$(document).on("click", "#btncrtn", function (e) {
var optname="";
var checkedInput = $('input[name="ctype"]:checked').length;
if(checkedInput == 0) {
alert("Please Select one case type");
return;
}
else {
if ($('#opn').is(':checked')) {
optname="O";
$('#CaseIdC').hide();
}
if ($('#lit').is(':checked')) {
optname="L";
$('#CaseIdC').hide();
}
if ($('#cun').is(':checked')) {
optname="C";
$('#CaseIdC').hide();
}
if ($('#oth').is(':checked')) {
$('#CaseIdC').show();
optname="T";
if ($('#CaseIdtxt').val()=="")
{
alert("Please enter aims id");
return;
}
}
});
i want a radio button with id #oth to be checked apart from condition #btncrtn click
if ($('#oth').is(':checked')) {
$('#CaseIdC').show();
});
how to achieve it.
I have a regular input field that is used to filter a DataTable. I have a keyup function on the input that triggers fnFilter, i would also like to change the color of the input to notify the user that the filter is active.
This is my code:
css
.pn-input {
border-color:#4d4f53;
}
.pn-input-active {
border-color:#126C00;
}
jQuery
$('#searchfield').keyup(function () {
oTable.fnFilter($(this).val());
if ($(this).val().length > 0) {
$(this).removeClass('pn-input');
$(this).addClass('pn-input-active');
} else {
$(this).removeClass('pn-input-active');
$(this).addClass('pn-input');
}
});
The fnFilter triggers correct for each character, but the input does not. The color only changes when i click outside of the text input.
What am i doing wrong?
Change css into
.pn-input {
border-color:#4d4f53!important;
}
.pn-input.pn-input-active {
border-color:#126C00!important;
}
script into
$('#searchfield').keyup(function () {
var Self=$(this);
oTable.fnFilter($(this).val());
if ($(Self).val().length > 0) {
$(Self).addClass('pn-input-active');
} else {
$(Self).removeClass('pn-input-active');
}
});
I'm trying to run certain processes on mousedown anywhere in the document, but different ones depending on whether or not certain elements are clicked. The below code isn't working. Thanks for any help!
$(document).on('mousedown',function(e) {
if (!$(e.target).hasClass('.item')) {
console.log('item');
} else {
console.log('not item);
}
});
to hasClass() you should pass the class name, not class selector
$(document).on('mousedown',function(e) {
if (!$(e.target).hasClass('item')) {
console.log('item');
} else {
console.log('not item');
}
});
here is my script. Now i can click one of these IDs and class "inputs" are visible. What i want is that I have to click on all elements.
$('#zwei,#sechs,#neun').bind('click', function() {
if( $(this).is(':checked')) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
JSFiddle:
http://jsfiddle.net/CLYC6/20/
can you help me please? whats wrong?
FK
Use this:
$('#zwei,#sechs,#neun').bind('click', function() {
$('.inputs').show();
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
$('.inputs').hide();
return;
}
});
});
Here is a LIVE DEMO.
Because #Rastko is not happy with the current solution here is one more:
$('#zwei,#sechs,#neun').bind('click', function() {
var showInput = true;
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
showInput = false;
return;
}
});
if (showInput) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
One more LIVE DEMO.
If statement should check whether all three are checked, and if input is not visible.
so:
if($('#zvei').is(':checked') && $('#neun').is(':checked') && $('#sechs').is(':checked') {
$('.inputs').show();
}