Alert if span text isn't 0 - javascript

I need to check if the value inside a span isn't 0, if not 0 I want jquery to alert me.
Here's the code:
<a href="./flash.php" class="button dark">Flash:
<span style="color:#15B64C;">0</span> </a>
So if in that span the value is different than zero I want to show a message with alert.
Thanks in advance :)

All you need to do is find the span contains 0 value in it by using :contains code as following, Try this code :
var span_val = parseInt($('span:contains(0)').text());
or (any of this)
var span_val = parseInt($('.button').find('span').text());
if(span_val !== 0)
{
alert('No');
}
else
{
alert('yes');
}

You can do something like this:
$('.button span').each(function ()
{
if($(this).text().indexOf('0') != -1)
{
alert("Yes");
}
else
{
alert ("No");
}
});
Here's a jsfiddle of the above: https://jsfiddle.net/AndrewL32/e0d8my79/19/

Related

javascript validation of existing class

I am working on javascript conditions.
If the field is empty I open an alert, else the function gets executed.
But I am trying to add another condition -- to verify the class of the field. If it is not in the page, or if it's empty, then directly execute the function/show an error.
How can I check with javascript if the class is in the page and if it's filled ?
$("#bouton").on("click", function(){
var warnning_message = 'warning message';
if(!$('.the-class').val()) {
alert(warnning_message);
}
else{
console.log('ok');
}
Seems hasclass will be useful
if($('.the-class').val()==='' && $('.the-class').hasClass('className')) {
alert(warnning_message);
}
You can check the existence of the class with $(".the-class").length > 0 code:
$("#botton").on( "click", function() {
var warnning_message = 'warning message';
if( $(".the-class").length > 0) {
alert(warnning_message);
}
else {
console.log('ok');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="botton" class="the-class">Click Here</div>
If you want to check whether an element with specific class exists or not use the following:
if ($(".the-class").length>0){
alert('Exists');
}
You could put ID to the field in order to select it and then do something like this:
if($( "#mydiv" ).hasClass( "the-class ))
console.log('has class');
else
console.log('no class');
Check the length of the array
if( $('.the-class').length == 0) {
alert(warnning_message);
}
else if (!$('.the-class').val()){
alert(warnning_message);
}

jQuery Input Colour Changes Not functioning correctly

I'm trying to get my input fields (associated by class) to change colour when they have content.
This is working, but removing the class isn't activating properly, and I'm unsure why. If I enter content into the first, then second input, delete the content from the first, the class is removed, however if I delete the content from the second before the first, the background remains blue.
I can't use the textboxes Id's as they're already in use.
JS Code:
$('.checkFiller').on('change', function () {
if ($('.checkFiller').length > 0) {
$(this).addClass('allFiller');
}
if ($('.checkFiller').val() == '' || $('.checkFiller').val() == 0 || $('.checkFiller').val() == null) {
$(this).removeClass('allFiller');
}
});
Here is a jsfiddle to demo my frustration - what am I doing wrong?
https://jsfiddle.net/qwgj77tm/1/
You need to use this to get the one you are editing use .hasClass() and .length to acheive this
$('.checkFiller').on('change', function () {
if($(this).val().length==0){
$(this).removeClass('allFiller');
}else $(this).addClass('allFiller');
});
.allFiller {
background-color: #333366;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkFiller">
<input class="checkFiller">
<input class="checkFiller">
You should change your references from $('.checkFiller') to $(this) in the on:
$('.checkFiller').on('change', function () {
if ($(this).length > 0) {
$(this).addClass('allFiller');
}
if ($(this).val() == '' || $(this).val() == 0 || $(this).val() == null) {
$(this).removeClass('allFiller');
}
});
As is, you're checking the first input with the class, rather the one that has changed.

jQuery with Javascript check substring of text

I am wondering if there's any way to make this possible. I want to to check if the text value of an element begins with a certain letter.
This is my non working code:
if ($('title').text().substring(0, 1) === 'W') {
$('body').css('background', '#27aae2');
}
you can try like this:
if(yourString.indexOf('A') === 0) {
}
Yes this work, see code snippet below. Please note it was created based on your original post.
$(document).ready(function() {
if ($('#element').text().substring(0, 1) === 'A') {
alert('Do something useful')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element">A hello</div>

indexOf ckecking if there is not words

I have problem with indexOf.
I have search and when I type something, .mark-select li will disappear or appear, depend on key word, I want to do something when there is not words in search that contains in .marka-select li . I don't know how to check when there is not same words.
Help please!
This is my code :
$("#marka").keyup(function() {
var marka = $("#marka").val().toLowerCase();
if(marka != "") {
$(".marka-select li").hide();
$(".marka-select li").each(function() {
var trenutna_marka = $(this).attr("data-keywords").toLowerCase();
if(trenutna_marka.indexOf(marka) >=0) {
$(this).show();
}
});
} else {
$(".marka-select li").show();
}
});
Of course it is possible that I just do not understand the question but why not just add an else statement to your if indexOf check?
if(trenutna_marka.indexOf(marka) > -1) {
$(this).show();
} else {
... do something else ...
}

jQuery: FadeIn a selected value on click

I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});

Categories