javascript - 未从输入框中提取值

Question

我有几个地址字段，其中第一个链接到 Google Places API。因此，您开始在此框中键入地址，然后当您单击该地址时，Google API 会将地址拆分到其他地址字段中。当用户完成此操作后，他们单击一个按钮，该按钮会动态收集表单中的所有信息。当页面首次加载时，所有控件都会动态加载，因此我无法使用固定值，因为可能存在这些字段未加载到页面上的情况。

当我收集数据时，从 google API 填充的字段保持为空，但所有其他字段都填充了应有的内容。

下面是添加点击事件并管理 API 功能的 JS:

//#region API - Add Job

$('#addJob').click(function () {
    // Setup the object to pass to API
    var Job = {};
    $(".form__input").each(function() {
        var name = this.name;
        var value = this.value;
        Job[name] = value; 
    });
    console.log(Job);

    // Pass Job Object to the API
});

//#endregion API - Add Job



//#region Address Auto Complete

var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    postal_code: 'short_name'
};
function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')),
        { types: ['geocode'] });

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
}

function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
        });
    }
}

//#endregion Address Auto Complete

几乎输入字段没有值，但我可以看到它实际上在页面上。生成的html代码为:

<input name="CollectionAddress" class="form__input js-required" id="autocomplete" onfocus="geolocate()" type="text" placeholder="Collection Address" autocomplete="off">
<input name="CollectionAddressLine1" class="form__input js-required" id="street_number" placeholder="No.">
<input name="CollectionAddressLine2" class="form__input js-required" id="route" placeholder="Street">
<input name="CollectionAddressLine3" class="form__input js-required" id="locality" placeholder="City">
<input name="CollectionPostcode" class="form__input js-required" id="postal_code" placeholder="Postcode">

来自“Job”对象的输出是:

CollectionAddress: "123 Bradwel...", 
CollectionAddressLine1: "", 
CollectionAddressLine2: "", 
CollectionAddressLine3: "", 
CollectionPostcode: ""

Answer 1

$(document).ready(function(){

		$('#addJob').click(function() {
		  // Setup the object to pass to API
		  var Job = {};
		  $(".form__input").each(function() {
		    var name = this.name;
		    var value = this.value;
		    Job[name] = value;
		  });
		  console.log(Job);
      $("#result").html(JSON.stringify(Job));

		  // Pass Job Object to the API
		});

		var placeSearch, autocomplete;
		var componentForm = {
		    street_number: 'short_name',
		    route: 'long_name',
		    locality: 'long_name',
		    postal_code: 'short_name'
		};
		function initAutocomplete() {
		    // Create the autocomplete object, restricting the search to geographical
		    // location types.
		    autocomplete = new google.maps.places.Autocomplete(
		        (document.getElementById('autocomplete')),
		        { types: ['geocode'] });

		    // When the user selects an address from the dropdown, populate the address
		    // fields in the form.
		    autocomplete.addListener('place_changed', fillInAddress);
		}

		function fillInAddress() {
		    // Get the place details from the autocomplete object.
		    var place = autocomplete.getPlace();

		    for (var component in componentForm) {
		        document.getElementById(component).value = '';
		        document.getElementById(component).disabled = false;
		    }

		    // Get each component of the address from the place details
		    // and fill the corresponding field on the form.
		    for (var i = 0; i < place.address_components.length; i++) {
		        var addressType = place.address_components[i].types[0];
		        if (componentForm[addressType]) {
		            var val = place.address_components[i][componentForm[addressType]];
		            document.getElementById(addressType).value = val;
		        }
		    }
		}

		function geolocate() {
		    if (navigator.geolocation) {
		        navigator.geolocation.getCurrentPosition(function (position) {
		            var geolocation = {
		                lat: position.coords.latitude,
		                lng: position.coords.longitude
		            };
		            var circle = new google.maps.Circle({
		                center: geolocation,
		                radius: position.coords.accuracy
		            });
		            autocomplete.setBounds(circle.getBounds());
		        });
		    }
		}
		initAutocomplete();
		//#endregion Address Auto Complete
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=false"></script>

<input name="CollectionAddress" class="form__input js-required" id="autocomplete" onfocus="" type="text" placeholder="Collection Address" autocomplete="off">
<input name="CollectionAddressLine1" class="form__input js-required" id="street_number" placeholder="No.">
<input name="CollectionAddressLine2" class="form__input js-required" id="route" placeholder="Street">
<input name="CollectionAddressLine3" class="form__input js-required" id="locality" placeholder="City">
<input name="CollectionPostcode" class="form__input js-required" id="postal_code" placeholder="Postcode">
<button id="addJob">addJob</button>

<div id="result"></div>

这工作正常。单击“addJob”按钮后，您可以获得所有值。