Jquery not grabbing html input

Question

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.

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

Swiffy
– Swiffy

2015-04-20 06:02:18 +00:00
Commented Apr 20, 2015 at 6:02 — Swiffy
– Swiffy, Commented Apr 20, 2015 at 6:02
@Piwwoli You should post that as an answer... :)

Rakesh_Kumar
– Rakesh_Kumar

2015-04-20 06:05:10 +00:00
Commented Apr 20, 2015 at 6:05 — Rakesh_Kumar
– Rakesh_Kumar, Commented Apr 20, 2015 at 6:05

Swiffy · Accepted Answer · 2015-04-20 06:06:43Z

11

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

answered Apr 20, 2015 at 6:06

Swiffy

4,7553 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Piyush · Accepted Answer · 2015-04-20 06:16:32Z

3

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

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

edited Apr 20, 2015 at 6:16

answered Apr 20, 2015 at 6:04

Piyush

4,0079 gold badges41 silver badges70 bronze badges

1 Comment

Nishit Maheta Over a year ago

You need to explain your code .. What changes you have apply

Zee · Accepted Answer · 2015-04-20 06:07:52Z

2

Replace

$(this).val

with

$(this).val()

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

$(this).val()

answered Apr 20, 2015 at 6:07

Zee

8,4805 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Jquery not grabbing html input

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related