google address autocomplete

Question

I'm using the new Google Address field in a form. I'm getting a successful lookup of an address as I type it in.

When I select the address, instead of populating the address fields, it gives a javascript error:

Uncaught TypeError: document.querySelector(...).val is not a function

In this section of code:

for(var i = 0; i < place.address_components.length; i++){ var addressType = place.address_components[i].types[0]; if(componentForm[addressType]){ document.querySelector("#"+componentForm[addressType]).val(place.address_components[i]["long_name"]); }}

Looking in the debugger, it should be correctly referencing my text field called street_number_field

componentForm contains the correct field names:

google address autocomplete image 1

And it is looking up the street_number and getting street_number_field, but it would seem #street_number_field has no function called val

Should it not be

document.querySelector("#"+componentForm[addressType]).value = place.address_components[i]["long_name"];