I am using if else condition in jQuery to handle check boxes.
My condition is that at least one check box is selected and after that alert if condition is running and not the other one. Here is my code
$(document).ready(function() {
$('#outer_menu').click(function() {
var $fields = $(this).find('input[name="mychoice"]:checked');
if (!$fields.length) {
alert('You must check at least one box!');
if(".a:checked "){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal:checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
return false;
}
});
});
our else if condition is not working when if condition false
I think what you are trying to do is to check whether the element with class a or a_original is checked, for that you need
if ($(".a").is(":checked ") {
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal").is(":checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
use .is() to check whether the element satisfies the given selector
you need to fetch the jQuery object for the target element
Look at this line of code:
if(".a:checked ")
I believe it should be:
if ($(".a:checked "))
That might not be the end of your issues though, unless a is a class rather than you intending to select links.
Same problem here:
else if (".a_orignal:checked")
Change to:
if($(".a").is(":checked")){
and:
else if ($(".a_orignal").is(":checked")){
The .prop() method gets the property value for the first element in the matched set.
Write:
if(".a").prop("checked"){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
}
else if (".a_orignal").prop("checked"){
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
}
Related
In PHP, the different if-elseif-scenarios rule each other out, right? I am a little confused, I don't seem to figure out why this is not the case in JavaScript here. Can anybody tell me how to simplify this?
(This statement is connected to radio-buttons and is supposed to style the selected radio button differently. However, when I do not include all the remove-parts, clicking one and then another one leaves me with both of them styled as "selected")
$("#item-upload-form input").on("change", function() {
var hello = $("input[name='category_select']:checked", "#item-upload-form").val();
if(hello == 1){
$("#handy").addClass("selected");
$("#pc").removeClass("selected");
$("#notebook").removeClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
$("#handy").removeClass("selected");
$("#notebook").removeClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
$("#pc").removeClass("selected");
$("#handy").removeClass("selected");
}
});
I think #Katana314 had the right answer to the question you're asking. Javascript isn't refreshing the page on each call so the class will stay on the element until you remove it. Might be a little cleaner this way...
$("#item-upload-form input").on("change", function() {
var hello = $("input[name='category_select']:checked", "#item-upload-form").val();
// find any element that has the selected class and remove it
$('.selected').removeClass('selected');
// then add it to which ever element needs it.
if(hello == 1){
$("#handy").addClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
}
});
Because you're using two selectors and checking hello with the value will only work for those whose both value returns the same value. If both selector value results in different values then your condition never match.
So, it will only match if both values are the same.
Let's keep only calls to addClass(). The code would look like this:
if(hello == 1){
$("#handy").addClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
}
What happens when you click on radio buttons?
R: Each time it will run only ONE branch. Successive clicks will only addClass to current element, and maintain classes of previous elements.
Why not let jQuery do all of the work for you - this way you can add/remove selections without updating your code:
$("#item-upload-form input").on("change", function (ele) {
$("#item-upload-form input").each(function( ) {
if ($(this).prop('checked')){
$(this).addClass("selected")
} else{
$(this).removeClass("selected") ;
}
});
});
To answer your question, yes, if-else-blocks will stop evaluating if a match is found.
Suggestion 1:
Try using === instead of ==.
=== checks both if the value and type are the same.
== 1 will pass as true for many things, including '1' == 1 and true == 1. I don't know what hello actually is, but you might be getting a false positive.
Suggestion 2:
Here is a revised code suggestion (instead of if-else blocks)
$("#handy").toggleClass("selected", (hello === 1));
$("#pc").toggleClass("selected", (hello === 2));
$("#notebook").toggleClass("selected", (hello === 3));
I have form that has input fields that are required, I point this out with made up class name.
I have piece of code that kind of works. If I focus on required input and then press submit, that input will become red, if empty (which I want). But it only works only on one at a time and if I have focus on the input.
My code is as follows:
function checkIfEmpty(){
$('#register-form input.gv-form-required').blur(function(){
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
return false;
}else{
return true;
}
});
}
I am almost certain that the blur() method is not suitable for my situation.
So help a man out here, please.
Try this : You have to use .each() to check every input inside form and put removeClass in else condition.
function checkIfEmpty(){
var empty = false;
$('#register-form input.gv-form-required').each(function(){
if($(this).val().trim()==""){
empty = true;
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
return empty;
}
The blur event indeed doesn't seem right in your situation. What I would do is that I would itterate through each field and checked whether it is filled or not. If it is, remove (if any) has-error class. If it isn't filled, give it the has-error class
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if($(this).val() === ""){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
change your code to the following:
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if( !$(this).is(':empty')){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
try
in else condition
$(this).parent().parent().removeClass("has-error");
js code
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
I need to take text from fields which have the same class. But when I apply the condition that if field is empty, give an alert, it checks the condition for the first time and ignores all the others as fields are all on the same page with the same class. I cannot have unique classes for every field because the divs are dynamically generated.
Here's my code,
$(document).on('click', '.submit-button', function(){
var maintain=$('form input.inputs-field').val ();
if(maintain == ''){
alert('Please fill that field');
return false;
}
else{
$(document).trigger('save-single-answer', {
answer: $(this).siblings('.inputs-field').val()
});
return true;
}
});
Use .each() to check all the fields. Current you just get the value of first matched element in maintain.
$(document).on('click', '.submit-button', function () {
var maintain = $(this).siblings('.inputs-field').val(); //OR $(this).val()
if (maintain == '') {
alert('Please fill that field');
return false;
} else {
$(document).trigger('save-single-answer', {
//here I assume `this` meant button before (in your code)
answer: maintain
});
return true;
}
});
Hey there i am using this little jquery:
$("area.imagefield[data-name='" + searchText + "']").each(function() {
to check if the value of the attribute "data-name" matches exactly the variable "searchText".
But i need to check if the value of the attribute "data-name" is index of the variable "searchText", so using the
.indexOf
What i tried:
$("area.imagefield[data-name=]").each(function() {
if ($(this).attr("data-name").indexOf(searchText) != -1) {
console.log("match");
} else {
console.log("no match");
}
But there is no log in the console... :/ any idea´s ?
Actually your code looks good except one typo.
Remove the equal sign after data-name otherwise it's an invalid css selector:
So area.imagefield[data-name=] should be area.imagefield[data-name]
Try this way:
$("#imagefieldID").each(function() {
if ($(this).attr("data-name").indexOf(searchText) != -1) {
console.log("match");
} else {
console.log("no match");
});
jQuery data()
Is the normal way of working withdata attributes in jQuery, and probably what you would want to use.
$('area.imagefield').each(function (i) {
if ($(this).data('name')===searchText) {
console.log('match '+i);
} else { console.log('no match '+i); }
});
made a fiddle: http://jsfiddle.net/filever10/mau93/
I want to check a textarea whether it is empty or not. For this I write the following code:
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if (problem_desc.value == '') {
alert("Please Write Problem Description");
return false;
} else {
return true;
}
}
For the first time it is working fine. But If I remove the text from the textarea the above function is returning true value i.e., it is assuming the previous text I've entered into the textbox. Can anybody kindly tell me where is the problem?
I am getting it correctly. This is what I did.
Click on validate, it said Please Write Problem Description.
Write something and click. Nothing happened.
Remove the text. Click on validate, it said Please Write Problem Description.
Note: Use a trim function to eliminate empty spaces.
Code:
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if ($.trim(problem_desc.value) == '') {
alert("Please Write Problem Description");
return false;
} else {
return true;
}
}
Demo: http://jsfiddle.net/TZGPM/1/ (Checks for Whitespaces too!)
Do check for white space in the value like this
if (problem_desc.value.match (/\S/)) { ... }
or other way check for length
problem_desc.value.length == 0;
Remove spaces and calculate length of the value attribute.
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if (problem_desc.value.replace(/ /g,'').length) {
return true;
} else {
alert("Please Write Problem Description");
return false;
}
}
<textarea id="problem_desc"></textarea>
<button onclick="validateForm()">Validate</button>