0

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.

2
  • 10
    $(this).val should be $(this).val()
    – Swiffy
    Apr 20, 2015 at 6:02
  • @Piwwoli You should post that as an answer... :) Apr 20, 2015 at 6:05

3 Answers 3

11

$(this).val should be $(this).val()

0
3

Just change (this).val to (this).val()

$(".bottlePrice, .containers, .servings").blur(function() {
if ($(this).val() ==="") {
    $(this).addClass("redClass");
}
1
  • You need to explain your code .. What changes you have apply Apr 20, 2015 at 6:15
2

Replace

$(this).val

with

$(this).val() 

and it should work. It is because in jQuery to get the value we use

$(this).val()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.