Проверить значение полей перед запуском функции в jquery

Question

Я в основном хочу иметь сценарий на странице, который показывает карту, когда он находит два поля на странице с именем «lng» и «lat», которые имеют значение.

Это означает, что если есть поля на странице со значениями, то он попытается отобразить карту, но если нет, значит, это не так.

Это код, который я до сих пор: 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(); 
}); 

Я не очень хорошо на JQuery в данный момент, но это то, что я пытался, не работает:

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

Может кто-нибудь с немного больше знаний поможет мне понять, почему этот подход не работает, пожалуйста?

Answer 1

Попробуйте

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

Так в основном он проверяет, если 2 входа являются числами, и только если оно истинно шагнет в если условие.

Также

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

можно смело записать в виде

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

Вы можете подключить к change событие для входов, которые будут отображаться на картах

код

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

Answer 2

Вы можете сделать это:

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

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

• Нет необходимости делать это input[id=lat], вы можете напрямую назвать его как $('#lat')
• Использование $.trim() удалить пробелы из начала и конец строки.

Answer 3

ваш код является правильным: нужно просто добавить строку в вас CSS для того, чтобы просмотреть карту:

добавить

display:block; in #map_canvas 

так:

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

кроме того, вы можете изменить его настройку отображения, установив это свойство отображения с помощью jquery (в зависимости от того, имеют ли переменные значения или нет).

по умолчанию текстовое поле возвращает строковое значение.поэтому для пустого текстового поля вы можете проверить:

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

Answer 4

возвращаемое значение из текстового поля не является NULL это просто пустая строка, так что вы должны проверить, не пусто ли значение или нет

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

и если вы хотите специфична для только цифры, попробуйте добавить

$.isNumeric() 

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

Answer 5

Как вы Prob проверки широты/долготы, я бы также проверить, если они numeric.

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

    return valueOK; 
} 

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

Answer 6

Вы можете получить доступ к переменным, как

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

И проверить, если поля были пусты

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