フィールドにダイナミックにデータが入力されているかどうかを確認するにはどうすればいいですか？

Question

出発地と目的地の間の固定価格を表示するGoogleマップで電卓を作った。

しかし、価格を入力したままにして、地図または部門をクリックした後に表示されます。

$(document).ready(function(){ 

    function initMap() { 
    var latlng = new google.maps.LatLng(52.379189, 4.899431); 
    var mapOptions = { 
     center: latlng, 
     zoom: 11, 
     mapTypeControl: false, 
     streetViewControl: false, 
     styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}] 
     }; 
     map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    } 

    function drivingRoute(from, to) { 
    var request = { 
     origin: from, 
     destination: to, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING, 
     unitSystem: google.maps.UnitSystem.METRIC 
    }; 
    if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null); 
    directionsService.route(request, function(response, status){ 
     if(status == google.maps.DirectionsStatus.OK){ 

     var totalKM = Math.round(response.routes[0].legs[0].distance.value/1000); 
     var distanceText = totalKM+' km'; 
     $('#controls p').text(distanceText); 

     var stadsdeelTest = document.getElementById('stadsdeel').value; 
     if (stadsdeelTest=='Centrum') { 
        var charges= '€ '+ 32; 
      } 
     else if (stadsdeelTest=='Amsterdam-Oost') { 
        var charges= '€ '+ 35; 
      } 
     else if (stadsdeelTest=='Oud-Zuid') { 
        var charges= '€ '+ 30; 
      } 

     $('#controls h2').text(charges); 

     drivingLine = new google.maps.Polyline({ 
      path: response.routes[0].overview_path, 
      strokeColor: "#b00", 
      strokeOpacity: .75, 
      strokeWeight: 5 
     }); 
     drivingLine.setMap(map); 
     map.fitBounds(response.routes[0].bounds); 

     } 

     else { 
     $('#controls p').addClass('error'); 
     } 

    }); 

    } 

    $('input').blur(function(){ 
    drivingRoute(
     $('input[name=from]').val(), 
     $('input[name=to]').val() 
    ); 
    }); 

    $(function(){ 
     $("#geocomplete").geocomplete({ 
      details: "form", 
      types: ["address"], 
      country: 'nl' 
     }); 

     $('input').blur(function(){ 
      $("#geocomplete").trigger("geocode"); 
     }); 
     }); 


    var map; 
    var drivingLine; 
    var directionsService = new google.maps.DirectionsService(); 
    initMap(); 
    $('input[name=to]').val('Schiphol'); 
    $('input[name=from]').trigger('blur'); 
}); 

// Autocomplete 
     var fromText = document.getElementById('geocomplete'); 
     var cityBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(52.379189, 4.899431)); 
     var options = { 
      bounds: cityBounds,    
      types: ['geocode'], 
      componentRestrictions: {country: 'nl'} 
     }; 

    // google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    // window.alert("you selected an item from suggestion list"); 
    // }); 

    $("input").change(function() { 
    document.getElementById("bestemming").focus(); 
      return false; 
}); 

document.getElementById('geocomplete').onkeypress = function (e) { 
     if (e.which === 13) { 
      document.getElementById("bestemming").focus(); 
      return false; 
     } 
    }; 

例：http://codepen.io/anon/pen/rMEdKO/

は出発欄に「ダムラック、アムステルダム、オランダの」置き、地図上をクリックしてください。これは、サブレセントラルセントラムの価格を示しています。

"Ceintuurbaan、Amsterdam、Nederland"への目的地を変更した後、マップをクリックした後にのみ価格を変更することはありません。

宛先を記入した直後の価格と、宛先を変更した場合の価格を表示したいとします。価格は自動的に変わる必要があります。代わりに、これはあなたの質問/問題に答える場合blurイベントがあなたのinput

//This is what you have 
    $('input').blur(function(){ 
    drivingRoute(
     $('input[name=from]').val(), 
     $('input[name=to]').val() 
    ); 
    }); 


    //Remove/modify the code above and try this 
    $('#geocomplete').bind('input', function() { 
     drivingRoute(
      $('input[name=from]').val(), 
      $('input[name=to]').val() 
     ); 
    }); 

完全にわからない上changeイベントをしようとgetを使用しての

Answer 1

。