未从输入框中提取值

Question

I have several address fields of which the first is linked to the Google Places API. So you start to type the address in this box and then when you click the address the google API splits the address over the other address fields. When the user has done this they click a button that gathers all of info from the form dynamically. When the page first loads all of the controls are loaded in dynamically so I can't use fixed values as there may be an instance where those fields are not loaded onto the page.

When I collect the data, the fields populated from the google API remain empty , but all the other fields populate with what they should.

Here's the JS that adds the click event and manages the API functionality:

//#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

It's almost as of the input field has no value, but I can see it's there actually on the page. The generated html code is:

<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">

And the output is from the 'Job' object is:

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> 

This is working fine. After clicking on "addJob" button you can get all the values.