Trouble adding some javascript

15 Jul 2015, 1:22 PM

#1

Zen Follower

Join Date:: Sep 2012
Posts:: 253
Plugin Contributions:: 0

Trouble adding some javascript

I am trying to add google address autocomplete to my site's create account page. I have the javascript code source getting pulled from the jquery_create_account.js file and using page source I can see it loading and have the autocomplete box displayed. However it is not populating anything when I start typing in an address using safari, chrome or firefox. All of the browsers show I am getting an "uncaught Reference error: google is not defined" How would I go about fixing this? At this point I have simply copied the api code into the javascript file and haven't made any changes to populate the correct fields so there are no errors outside of zen-cart. I tried it on another test form I created not the example one provided and it works perfectly so it's just not playing nicely with zen-cart.
You may see the error at https://onlineorder.sshorepizza.com/...ain_page=login

The google autocomplete field is is the third one down that says please don't use this section yet. (This isn't a public site.)

Thank you for your guidance.

15 Jul 2015, 3:26 PM

#2

mc12345678

Totally Zenned

Join Date:: Jul 2012
Posts:: 16,908
Plugin Contributions:: 2

Re: Trouble adding some javascript

Link didn't "copy" properly...

15 Jul 2015, 3:30 PM

#3

southshorepizza

Zen Follower

Join Date:: Sep 2012
Posts:: 253
Plugin Contributions:: 0

Re: Trouble adding some javascript

moved a couple things around now the error is on autocomplete.setBounds view here.

15 Jul 2015, 4:19 PM

#4

mc12345678

Totally Zenned

Join Date:: Jul 2012
Posts:: 16,908
Plugin Contributions:: 2

Re: Trouble adding some javascript

FYI, reported that there is a certificate error... Don't know if google has made that part of their process and could be an issue, but thought worth mentioning possibly.

Couple of other things, looks like there are some other errors on the page that could/might affect the javascript from running. There are two instances of <body tags on the page. One at line 633 and the other at 818.

Got an undefined result when attempting to use the code contained within the if statement.

Seeing the duplicate body tag, perhaps the onload code should be moved up to where the body tag was first called.

What is currently line 633:

<body id="loginBody" onload="update_zone(document.create_account); update_zone_shipping(document.create_account);">

To be made to:

<body id="loginBody" onload="update_zone(document.create_account); update_zone_shipping(document.create_account); initialize();">

Might take a smidge to find exactly where to put that, but...

15 Jul 2015, 6:47 PM

#5

mc12345678

Totally Zenned

Join Date:: Jul 2012
Posts:: 16,908
Plugin Contributions:: 2

Re: Trouble adding some javascript

Yeah, actually I get it now, looks like your initialize function is never called... Not sure if there is some other javascript error, but probably should move the initialize function ahead of the other onload operations...

15 Jul 2015, 8:58 PM

#6

southshorepizza

Zen Follower

Join Date:: Sep 2012
Posts:: 253
Plugin Contributions:: 0

Re: Trouble adding some javascript

thank you. I found it in includes/modules/pages/login/onload_login.js Between your help and Lat9 I have it working and am learning so much on how to do this. Thank you all but especially both of you for your willingness to help me learn!

15 Jul 2015, 9:04 PM

#7

mc12345678

Totally Zenned

Join Date:: Jul 2012
Posts:: 16,908
Plugin Contributions:: 2

Re: Trouble adding some javascript

Well the tough ones are the fun ones. :)

15 Jul 2015, 11:07 PM

#8

southshorepizza

Zen Follower

Join Date:: Sep 2012
Posts:: 253
Plugin Contributions:: 0

Re: Trouble adding some javascript

I have everything working properly except for some reason I cannot place the zipcode or telephone into the respective elements. I am using ```
document.getElementById('postcode').value = zipcode;

and ```
document.getElementById('telephone').value = phone;

zipcode and phone are variables. I can see the zipcode variable in safari developer's show page resources screen. So it is populating. I have tried making var phone = "test"; to see if it is working. I can put these values in other element id locations such as id="firstname" or id="lastname" but not the id="postcode" or id="telephone".

Any ideas? here is the page again if you need it.

Thank you!

16 Jul 2015, 1:21 PM

#9

lat9

Administrator

Join Date:: Sep 2009
Location:: Stuart, FL
Posts:: 14,097
Plugin Contributions:: 56

Re: Trouble adding some javascript

You've got another HTML error to resolve. The section that looks like:

   <fieldset class="fec-company">
    
    <legend>Please enter your address legend</legend>
    	<div id="locationField">
        <label class="inputLabel" for="google_address">Type address here for it to autofill everything but the zip code</label>
        <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" required ></input>
        </div>
     </fieldset>

has an invalid input statement; the section should be coded as follows, self-closing the <input> tag:

    <fieldset class="fec-company">
    
    <legend>Please enter your address legend</legend>
    	<div id="locationField">
        <label class="inputLabel" for="google_address">Type address here for it to autofill everything but the zip code</label>
        <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" required [B]/>[/B]
        </div>
     </fieldset>

16 Jul 2015, 1:43 PM

#10

southshorepizza

Zen Follower

Join Date:: Sep 2012
Posts:: 253
Plugin Contributions:: 0

Re: Trouble adding some javascript

That's so funny you mention that because I was doing it the way you mentioned and my teacher last semester kept telling me that was wrong. I kept telling him it's how I see the code written. :)

Any ideas why I can't access the zip code or phone number elements with the id's of postcode and telephone?

Thank you

16 Jul 2015, 1:59 PM

#11

lat9

Administrator

Join Date:: Sep 2009
Location:: Stuart, FL
Posts:: 14,097
Plugin Contributions:: 56

Re: Trouble adding some javascript

If you look at the console-log (F12, then console tab while you're viewing the page), you'll see that the statement

var phone = document.getElementById('email-address').value;

is resulting in the phone variable being null (i.e. no element with id="email-address"). Of course, you'll eventually change this statement to

var phone = document.getElementById('telephone').value;

but it, too, will fail.

The issue is that you're setting that variable before the page has been fully loaded so the HTML element is not available. Perhaps you'd want to move the following code block to the top of the check_form function:

var phone = document.getElementById('telephone').value;
phone.value = phone.value.replace(/\D/g,"");
if (phone.value.toString().length == 10){
document.getElementById('telephone').value = phone.value;
}