CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3617

Jquery not grabbing html input

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

Answers (3)

Piyush
Piyush

Reputation: 4007

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

$(".bottlePrice, .containers, .servings").blur(function() {
if ($(this).val() ==="") {
    $(this).addClass("redClass");
}

Upvotes: 3

Zee
Zee

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

Swiffy
Swiffy

Reputation: 4693

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

Upvotes: 11

Related Questions