Check value of fields before running function in jquery

Question

I basically want to have a script on the page which shows a map when it finds two fields on the page named "lng" and "lat" which have a value.

This means that if there are the fields on the page with values, then it will try and display a map, but if not, then it will not.

This is the code I have so far: http://jsfiddle.net/spadez/xJhmk/3/

function mapDisplay() {

    var latval = $('input[id=lat]').val();
    var lngval = $('input[id=lng]').val();

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(latval, lngval),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        scrollwheel: false,
        draggable: false
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}


$(function () {
    mapDisplay();
});

I am not very good at jquery at the moment but this is what I tried which didn't work:

if (latval !=NULL && lngval != NULL)){
...my code
}

Can someone with a little more knowledge help me understand why this approach doesn't work please?

Sushanth -- · Accepted Answer · 2013-06-21 08:52:46Z

1

Try this

if ( !isNaN(latval) && !isNaN(lngval)) {

So basically it checks if the 2 inputs are numbers, and only if true will step into the if condition.

Also

var latval = $('input[id=lat]').val();
var lngval = $('input[id=lng]').val();

can be safely written as

var latval = $('#lat').val(),
    lngval = $('#lng').val();

You can hook up the change event for the inputs that will display the maps

Code

function mapDisplay() {

    var latval = $('#lat').val(),
        lngval = $('#lng').val();
      if (!isNaN(parseFloat(latval)) && !isNaN(parseFloat(lngval))) {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(latval, lngval),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false,
            draggable: false
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        $('#map_canvas').removeClass('hidden');
    } else {
        $('#map_canvas').addClass('hidden');
    }
}


$(function () {
    $('input').on('change', mapDisplay).trigger('change');
});

Check Fiddle

edited Jun 21, 2013 at 8:52

answered Jun 21, 2013 at 8:35

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

2 Comments

FLF Over a year ago

isNaN return true when the string is Empty and it is also return true went a null is passed ,

Sushanth -- Over a year ago

@FLF. oopps... missed that.. Thanks for pointing it out. I have added an extra condition now..

palaѕн · Accepted Answer · 2013-06-21 08:38:18Z

1

You can do this:

var latval = $('#lat').val();
var lngval = $('#lng').val();

if ($.trim(latval) != '' && $.trim(lngval) != '') {
    // You code

No need to do this input[id=lat], you can directly call it like $('#lat')
Use $.trim() to remove the whitespace from the beginning and end of a string.

answered Jun 21, 2013 at 8:38

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Deep Sharma · Accepted Answer · 2013-06-21 08:44:43Z

1

your code is correct : you just have to add a line in you css in order to view the map:

add

display:block; in #map_canvas

like this :

#map_canvas {
    display:block;
    height: 150px;
    width: 300px;
}

moreover you can change its display setting by setting this display property using jquery(depending upon whether variables have values or not.).

by default textbox returns string value. so for empty textbox you can check :

if(latval=='' && lngval==''){alert('blank');}
else{your code;}

edited Jun 21, 2013 at 8:44

answered Jun 21, 2013 at 8:38

Deep Sharma

3,4943 gold badges32 silver badges50 bronze badges

Comments

FLF · Accepted Answer · 2013-06-21 08:59:14Z

1

the value returned from text box is not a NULL it is just an empty string so you should check whether the value is empty or not

if(latval !="" && lngval !=""){
Your code
}

and if you want to specific for only numbers , try adding

$.isNumeric()

 if($.isNumeric(latval) && $.isNumeric(lngval )){
    Your code
    }

edited Jun 21, 2013 at 8:59

answered Jun 21, 2013 at 8:43

FLF

1571 silver badge11 bronze badges

Comments

Nesmar Patubo · Accepted Answer · 2013-06-21 09:40:08Z

1

You can access variables like

var lat = jQuery.trim($('#lat').val());
var lng = jQuery.trim($('#lng).val());

And check if the fields were empty

if(lat == '' && lng == '') {
    //do code
} else {
   //show the map
   $("#mapId").show();
}

answered Jun 21, 2013 at 9:40

Nesmar Patubo

744 bronze badges

Comments

Naoe · Accepted Answer · 2013-06-21 09:45:06Z

1

As you are prob checking latitude/longtitude, I would also check if they are numeric.

function checkValues() {
    var valueOK = false;
    if($.isNumeric($('#lat').val())) { 
         if($.isNumeric($('#lng').val())) valueOK = true;
    }

    return valueOK;
}

$(function () {
    if(checkValues) {
         mapDisplay();
    }
}

edited Jun 21, 2013 at 9:45

answered Jun 21, 2013 at 8:45

Naoe

1,2198 silver badges12 bronze badges

Collectives™ on Stack Overflow

Check value of fields before running function in jquery

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related