What's wrong with this jQuery function?

Question

Could anyone please explain why this function doesn't work?

<form id="spot-search">
    <label for="text-basic">Postcode</label>
    <input type="text" name="postcode" id="postcode" value="">
    </br>
    <label for="slider">within mile radius</label>
    <input type="range" name="radius" id="radius" value="50" min="0" max="200">
    </br>
    <label>Select spot type</label>
    <a href="#spot-type" data-role="button">All</a>
    </br>
    <input type="submit" value="Search">
</form>

<div id="map1">
    map 1 goes here
</div>
<div id="map2">
    map 2 goes here
</div>
<div id="map3">
    map 3 goes here
</div>
<div id="map4">
    map 4 goes here
</div>
<div id="map5">
    map 5 goes here
</div>

When submitted should run this function:

$('#spot-search').submit(function(e) {
    var radius = getElementById('#radius');

    if ($radius<=40) {
        $('#spot-search').hide();
        $('#map1').show();
    } elseif($radius>40 && $radius<=80) {
        $('#spot-search').hide();
        $('#map2').show();
    } elseif($radius>80 && $radius<=120) {
        $('#spot-search').hide();
        $('#map3').show();
    } elseif($radius>120 && $radius<=160) {
        $('#spot-search').hide();
        $('#map4').show();
    } elseif($radius>160 && $radius<=200) {
        $('#spot-search').hide();
        $('#map5').show();
    }
    e.preventDefault();
}

I'm using jQuery mobile, but also tested this separately from that. Sorry for being a help vampire - but I'm stumped and could really do with some help!

Answer 1

The various answers here have all focussed on different aspects of what's wrong (lurkers: please upvote the helpful ones), so I'll sum them up in a community answer:

1. It's else if (note the space), not elseif.

2. You've used the variable name radius, but then when referencing it you use $radius. Either is fine, pick one and be consistent. I'll use radius.

3. Instead of getElementById("#radius"), use $("#radius"). (There were two different problems with the first version: 1. getElementById is a property of document, not a global. 2. You don't use a selector with it, just the ID.)

4. You're using radius as though it were a number, but it's an object (the DOM element if you use getElementById, a jQuery object if you use $()). So you probably want .val() there, too. And although JavaScript will convert the string to a number for you when you do things like radius < 40, it's usually best to parse it explicitly. So:

   var radius = parseInt($("#radius").val(), 10); // 10 = base 10
   

5. You haven't closed the call to submit, you need a ); after the last } in your code.

Separately, if you're using else if, you don't need the initial radius >= XX && part of the subsequent conditions.

Answer 2

Syntax error 1,

 elseif($radius>40 && $radius<=80) {
//--^

Add a space over here in all of your else if block.

---

Syntax error 2,

use,

var radius =$('#radius').val();

instead of

var radius = getElementById('#radius');

Answer 3

Problem is with this line var radius = getElementById('#radius');

It should be

 $('#spot-search').submit(function (e) {
    var radius = parseInt($('#radius').val());

    if (radius <= 40) {
        $('#spot-search').hide();
        $('#map1').show();
    } else if (radius > 40 && radius <= 80) {
        $('#spot-search').hide();
        $('#map2').show();
    } else if (radius > 80 && radius <= 120) {
        $('#spot-search').hide();
        $('#map3').show();
    } else if (radius > 120 && radius <= 160) {
        $('#spot-search').hide();
        $('#map4').show();
    } else if (radius > 160 && radius <= 200) {
        $('#spot-search').hide();
        $('#map5').show();
    }
    e.preventDefault();
}

You need to use parseInt because the return type of .val() is string

Answer 4

Your variable name is radius, but you are referencing $radius.

Try:

var $radius = $('#radius');

Also, it is else if - not elseif

Answer 5

You havent closed submit() function and elseif wants a better syntact

    $('#spot-search').submit(function (e) {
    var radius = $('#radius').val();

    if (radius <= 40) {
        $('#spot-search').hide();
        $('#map1').show();
    } else if ((radius > 40) && (radius <= 80)) {
        $('#spot-search').hide();
        $('#map2').show();
    } else if ((radius > 80) && (radius <= 120)) {
        $('#spot-search').hide();
        $('#map3').show();
    } else if ((radius > 120) && (radius <= 160)) {
        $('#spot-search').hide();
        $('#map4').show();
    } else if ((radius > 160) && (radius <= 200)) {
        $('#spot-search').hide();
        $('#map5').show();
    }
    e.preventDefault();
});

Answer 6

Add space between else if

$('#spot-search').submit(function (e) {
    var radius = $('#radius').val();

    if ($radius <= 40) {
        $('#spot-search').hide();
        $('#map1').show();
    } else if ($radius > 40 && $radius <= 80) {
        $('#spot-search').hide();
        $('#map2').show();
    } else if ($radius > 80 && $radius <= 120) {
        $('#spot-search').hide();
        $('#map3').show();
    } else if ($radius > 120 && $radius <= 160) {
        $('#spot-search').hide();
        $('#map4').show();
    } else if ($radius > 160 && $radius <= 200) {
        $('#spot-search').hide();
        $('#map5').show();
    }
    e.preventDefault();
}