JQuery change function based on if the 'select' is more or less than a given value.

Question

Hi All,

This seems to be defeating me at the moment but I don't think I can be a million miles away.

Basically I have a Age Verification form which just shows the year unless it's the year in which the day month would also affect the user meeting the age restriction, (in this case 1992 for 18) - in which case the day/month selects would also appear (fadeIn).

So here's the code I have:

$(document).ready(function(){
$('#dateob').hide();  //hide the div containing the month and day selects
$("#f_yob").change(function() {
//select change function - if the value is greater than 1992 show the other select boxes
if ("$('#f_yob').attr('value')>1992")  {
$('#dateob').fadeIn('slow');
}
//otherwise hide the day/month selects 
else {
$('#dateob').fadeOut('slow');
}
});
});

If anyone is able to tell me where I'm going wrong I'd really appreciate it!

Andy

Answer 1

You just need to change your if to this:

if (parseInt($(this).val(), 10) > 1992)  {

In a <select> (or any other input type), you use .val() to get the value then use parseInt() since you're comparing it to a number (.val() returns a string).

---

For the "what's wrong?" part..syntax mainly, you just have a string in the if(), which if not empty is true as far as an if() check is concerned, instead you need an actual comparison there.

Answer 2

in the fifth line of your code you do something like this:

if ("$('#f_yob').attr('value')>1992") { }

I believe what you meant is:

 if ($('#f_yob').attr('value')>1992) { }

Or even better:

if (parseInt($('#f_yob').val()) > 1992)  { }

---

Edit 1 you can use .val() instead of .attr('value').

Edit 2: Added parseInt