Levi Levi - 8 months ago 44
Javascript Question

Javascript not initiating for getElementByID

When the user types in the address it is supposed to take the address and place its content within the hidden input fields. The javascript isnt firing and writing in the values for the input fields that are hidden.

I believe it may be javascript/jquery not executing in the correct order or I have a version conflict issue?

I have a Google Address auto complete

var placeSearch, autocomplete;
// Need to add Lat / Long to populate field.
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name',


function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {
types: ['geocode']
autocomplete.addListener('place_changed', fillInAddress);

function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = true;
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;
document.getElementById("Latitude").value = place.geometry.location.lat();
document.getElementById("Longitude").value = place.geometry.location.lng();
google.maps.event.addDomListener(window, "load", initAutocomplete);

I have the input fields as

<input type="hidden" value="" class="form-control" id="street_number" name="pnumb">
<input type="hidden" value="" class="form-control" id="route" name="paddy">
<input type="hidden" value="" class="form-control" id="locality" name="pcity">
<input type="hidden" value="" class="form-control" id="administrative_area_level_1" name="pstat">
<input type="hidden" value="" class="form-control" id="postal_code" name="pzip">
<input type="hidden" value="" class="form-control" id="Latitude" name="plat">
<input type="hidden" value="" class="form-control" id="Longitude" name="plong">

This is the javascript jquery I have at the top of my page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

and this is what is at the bottom of the page.

<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../../plugins/fastclick/fastclick.js"></script>
<script src="../../dist/js/app.min.js"></script>
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>

I get the following error codes from the Console

1.) ReferenceError: google is not defined[Learn More]
2.) TypeError: document.getElementById(...) is null[Learn More]

I am also having issues with trying to utilize datepicker.

I believe i have my javascript/jquery executing improperly??

Any ideas; I am horrible with Javascript/Jquery

Answer Source

I had to remove country: 'long_name', from my componentFrom variable. I didn't have an input field defined for it and it was causing it to break the js.