Self : {self}
 
<script>
$(document).ready(function(){
  var whatiwant = "this is what I want";
  $("#answer714997X7X98").val(whatiwant);
});
</script>

<script>
  $(document).ready(function(){
    var whatiwant = "this is what I want";
    $("#answer{SGQ}").val(whatiwant).trigger('keyup');
  });
</script>

Self : {self}
<p>SGQ: {SGQ}</p>
<input id="text" name="text" type="text" /> <script>
$(document).ready(function(){
  $("#text").keyup(function() {
    var whatiwant = document.getElementById("text");
    document.getElementById("answer{SGQ}").value = whatiwant.value;
  });
  $("#answer{SGQ}").trigger('keyup');
});
</script>

$("#answer{SGQ}SQ001").val(result.geometry.location.lat()).trigger('keyup');

//this does not seem to work, the value of the text field do not change :(
$("#answer{SGQ}SQ003").val(carikodepos.long_name).trigger('keyup');

<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&amp;amp;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>

<p><strong>Where do you live?</strong></p> 
<!--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>
 
<!--Division for the map canvas-->
<div id="map_canvas" style="width:100%; height: 350px; margin: 20px 0;"> </div>
 
<!--call necessary scripts--> 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;amp;key=yourKey"></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 type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Move the canvas
    $('#question{QID} .answer-container').append($('#map_canvas'));
 
    //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
    $("#answer{SGQ}SQ004").geocomplete(options).bind("geocode:result", function(event, result){
      var map = $("#answer{SGQ}SQ004").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
    $("#answer{SGQ}SQ004").bind("geocode:dragged", function(event, latLng){
      var map = $("#answer{SGQ}SQ004").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"){
              $("#answer{SGQ}SQ003").val(carikodepos.long_name).trigger('keyup');
            }
          }
          var alamat = results[0].formatted_address;
          $("#answer{SGQ}SQ004").val(alamat).trigger('keyup');
        }
      });
    })
  });
</script>