Reputation: 3617
I have the following html:
<label for="bottlePrice">Desired Price </label>
<input type=number class="bottlePrice required" name="bottlePrice" placeholder="$0.00">
<label for="containers">Containers </label>
<input type=number class="containers required" name="containers">
<label for="servings">Servings per Container </label>
<input type=number class="servings required" name="servings">
I'm trying to turn these input boxes a shade of red if they're left empty with the following jquery:
$(".bottlePrice, .containers, .servings").blur(function() {
if ($(this).val ==="") {
$(this).addClass("redClass");
}
where .redClass is a CSS snippet:
.redClass {
background-color: #CDC9C9;
}
However, this is not producing the desired effect. I've tried it on other input fields with the exact same code and it works fine so I'm not sure why this example is coming up empty.
JSFiddle says my javascript is fine.
Upvotes: 0
Views: 77
Reputation: 4007
Just change (this).val
to (this).val()
$(".bottlePrice, .containers, .servings").blur(function() {
if ($(this).val() ==="") {
$(this).addClass("redClass");
}
Upvotes: 3
Reputation: 8488
Replace
$(this).val
with
$(this).val()
and it should work. It is because in jQuery to get the value we use
$(this).val()
Upvotes: 2