How to Insert Answer via Javascript

Mehr
2 Wochen 1 Tag her - 2 Wochen 1 Tag her #169556 von b1994mi
b1994mi erstellte das Thema How to Insert Answer via Javascript
Hi, I have been using the html and javascript for a while in Limesurvey. I just realized that after inserting a value with javascript/jquery the answer is not recognized by Limesurvey. But, after I change the answer by my self, it worked.

The question is: how do I insert the javascript/jquery needed for Limesurvey to recognize? Is there any step that I missed?

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

What I am really trying to do is make an autocomplete form with gmap ( Ubilabs Geocomplete ) and insert data populated from the map to Limesurvey's answer without the user having to copy-paste it.

I have made a short animated GIF for explaining the situation.
Anhang:
Letzte Änderung: 2 Wochen 1 Tag her von b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 23 Stunden her #169572 von tpartner
tpartner antwortete auf das Thema: How to Insert Answer via Javascript
You need to fire the Expression Manager function(s).

Try this:

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

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Folgende Benutzer bedankten sich: LouisGac, b1994mi

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 6 Tage her - 1 Woche 6 Tage her #169674 von b1994mi
b1994mi antwortete auf das Thema: How to Insert Answer via Javascript
Edit: I have spoken too soon. I just realized that I can not obtain the value with a HTML text input. How?

This is the code:
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>

Here is the GIF:
Anhang:
Letzte Änderung: 1 Woche 6 Tage her von b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 6 Tage her #169682 von tpartner
tpartner antwortete auf das Thema: How to Insert Answer via Javascript
Sorry, I have no clue what you are trying to do. Why are you inserting a text input onto an existing form?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 4 Tage her #169690 von b1994mi
b1994mi antwortete auf das Thema: How to Insert Answer via Javascript
What I was trying to do is actually get the coordinates, postal code, and address from ubilabs geocomplete.

I thought that if I can find the answer to problems above, I can find the answer for my problem too. Basicly, I need to copy the values to Limesurvey's text input and make Limesurvey recognize the value/input.

This is what my real code looks like:
Warnung: Spoiler! [ Zum Anzeigen klicken ]


And here is how the question looks like:
Warnung: Spoiler! [ Zum Anzeigen klicken ]

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 4 Tage her #169701 von tpartner
tpartner antwortete auf das Thema: How to Insert Answer via Javascript

Basicly, I need to copy the values to Limesurvey's text input and make Limesurvey recognize the value/input.

I have already explained how to do that above.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 2 Tage her - 1 Woche 2 Tage her #169793 von b1994mi
b1994mi antwortete auf das Thema: How to Insert Answer via Javascript
I see, I have it working with short free text question.. It seems that I have to use jquery rather than javascript and put the .trigger('keyup') in one line with assigning the .value(whatiwant).

Thank you for your help, it is very much appreciated. :D
Letzte Änderung: 1 Woche 2 Tage her von b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 2 Tage her - 1 Woche 2 Tage her #169823 von b1994mi
b1994mi antwortete auf das Thema: How to Insert Answer via Javascript
Hi, it seems that I still have some trouble with the same thing.



Now, I have tried using
$("#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
//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):
Warnung: Spoiler! [ Zum Anzeigen klicken ]

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:
Warnung: Spoiler! [ Zum Anzeigen klicken ]

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:
<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="http://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyD0v6cdUflFKKxeUzzQWn1t2kriR57nf1s"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://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>
Anhang:
Letzte Änderung: 1 Woche 2 Tage her von b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #169843 von tpartner
tpartner antwortete auf das Thema: How to Insert Answer via Javascript
I still don't see why you are inserting an <input> element into the existing form. Can you attach a sample survey containing only that question and the script?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #169847 von tpartner
tpartner antwortete auf das Thema: How to Insert Answer via Javascript
...also, why not simply use the core map question?

- manual.limesurvey.org/Question_type_-_Short_free_text#Location

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #169849 von b1994mi
b1994mi antwortete auf das Thema: How to Insert Answer via Javascript
Hi,

I have attached below my survey with only the question that I am having trouble with. What I am trying to accomplish is to ask respondents where they live as user friendly as possible and I need to store the coordinates, the postal code, and the complete address form. The rest of the survey is just a stated preference transportation study, asking people about prices, etc.

The built-in map, both gmaps and openstreet map, included in Limesurvey is not user friendly enough. So, I stumbled upon this Ubilabs Geocomplete solution, but I have not net been able to make things work the way I need it.

I hope you could help me out of this. :)

Sincerely,
b1994mi
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her - 1 Woche 1 Tag her #169883 von tpartner
tpartner antwortete auf das Thema: How to Insert Answer via Javascript
3 major problems...
  1. You are calling for jQuery while it is already included - this introduces conflicts.
  2. You have inserted an <input type="text"> element that is causing errors with Expression Manager. As stated, you cannot simply add inputs to an existing form. Use one of the sub-question inputs instead.
  3. When using curly braces in a script, that are not for Expression Manager variables, you must insert a white-space after opening braces and before closing braces.

<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="http://maps.googleapis.com/maps/api/js?libraries=places&amp;key=yourKey"></script> 
<script src="http://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>

Working survey attached:

Dateianhang:

Dateiname: limesurvey...6171.lss
Dateigröße:19 KB



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Anhang:
Letzte Änderung: 1 Woche 1 Tag her von tpartner.
Folgende Benutzer bedankten sich: Ben_V, b1994mi

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #169907 von b1994mi
b1994mi antwortete auf das Thema: How to Insert Answer via Javascript
Wow, thank you very much for your help! I am really greatful for it ^_^

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha