Hi, it seems that I still have some trouble with the same thing.
Now, I have tried using
Code:
$("#answer{SGQ}SQ001").val(result.geometry.location.lat()).trigger('keyup');
but it did not change the value of answer. It only changed the text input field.
I also found out that I can not even make the text field to change the value using this line
Code:
//this does not seem to work, the value of the text field do not change :(
$("#answer{SGQ}SQ003").val(carikodepos.long_name).trigger('keyup');
How is so?
I am really confused as I have no prior experience with HTML, javascipt, nor JQuery.
This is what it looks like when I insert the address from the text input and clicking the autocomplete form (geocomplete):
Notice that the whole input text changes, but hte answer is not yet recognized by Limesurvey.
And this is what it looks like after I drag the marker on the map:
The lat, lng, and the top input text changes but the address and postalcode does not change. Also, the answer have not yet recognized by Limesurvey.
What am I doing wrong? :dry:
Here is my full code:
Code:
<label>Where do you live?</label>
<!--to show what the answer looks like-->
<p>self: {self}</p>
<p>SQ001: {yourhome_SQ001}</p>
<p>SQ002: {yourhome_SQ002}</p>
<p>SQ003: {yourhome_SQ003}</p>
<p>SQ004: {yourhome_SQ004}</p>
<!--Show input text field for address using Limesurvey style-->
<div class="ls-answers answer-item text-item ">
<input class="form-control " id="mailcompletegeser" style="" type="text" value="" />
</div>
<!--Division for the map canvas-->
<div id="map_canvas" style="width:100%; height: 350px;"> </div>
<!--call necessary scripts-->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD0v6cdUflFKKxeUzzQWn1t2kriR57nf1s"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<!--the script that uses geocomplete and insert the values to answer field-->
<script>
$(document).ready(function(){
//Make the answer text field unavailable for user to change the value
document.getElementById("answer{SGQ}SQ001").readOnly = true;
document.getElementById("answer{SGQ}SQ002").readOnly = true;
document.getElementById("answer{SGQ}SQ003").readOnly = true;
document.getElementById("answer{SGQ}SQ004").readOnly = true;
//declare and initialize map named 'options'
var options = {
country: ["ID"],
types: ['geocode','establishment'],
map: "#map_canvas",
location: [-6.17511, 106.86503949999997],
mapOptions: {
zoom: 10,
streetViewControl: false,
fullscreenControl: false,
mapTypeControl: false
},
markerOptions: {
draggable: true
}
};
//what to do when the user inputs address and uses the geocomplete form
$("#mailcompletegeser").geocomplete(options).bind("geocode:result", function(event, result){
var map = $("#mailcompletegeser").geocomplete("map");
var pcd = "";
for(var i=0; i < result.address_components.length; i++){
var component = result.address_components[i];
if(component.types[0] == "postal_code")
{
pcd = component.long_name;
}
}
//input the values to the limesurvey's answer field
$("#answer{SGQ}SQ001").val(result.geometry.location.lat()).trigger('keyup');
$("#answer{SGQ}SQ002").val(result.geometry.location.lng()).trigger('keyup');
$("#answer{SGQ}SQ003").val(pcd).trigger('keyup');
$("#answer{SGQ}SQ004").val(result.formatted_address).trigger('keyup');
});
//what to do when user drags the marker on map
$("#mailcompletegeser").bind("geocode:dragged", function(event, latLng){
var map = $("#mailcompletegeser").geocomplete("map");
map.panTo(latLng);
var geocoder = new google.maps.Geocoder();
$("#answer{SGQ}SQ001").val(latLng.lat()).trigger('keyup');
$("#answer{SGQ}SQ002").val(latLng.lng()).trigger('keyup');
geocoder.geocode({'latLng': latLng }, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
for(var i=0; i < results[0].address_components.length; i++){
var carikodepos = results[0].address_components[i];
if(carikodepos.types[0] == "postal_code"){
//this does not seem to work, the value of the text field do not change :(
$("#answer{SGQ}SQ003").val(carikodepos.long_name).trigger('keyup');
}
}
var alamat = results[0].formatted_address;
//neither does this one, it does not change the text field
$("#answer{SGQ}SQ004").val(alamat).trigger('keyup');
$("#mailcompletegeser").val(alamat);
}
});
});
});
</script>
