How to Insert Answer via Javascript

Mehr
11 Monate 2 Wochen her - 11 Monate 2 Wochen her #169556 von b1994mi
COM_KUNENA_MESSAGE_CREATED_NEW
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:
Last edit: 11 Monate 2 Wochen her by b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

LimeSurvey Partners
Mehr
11 Monate 1 Woche her #169572 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Official LimeSurvey Partner - partnersurveys.com
Folgende Benutzer bedankten sich: LouisGac, b1994mi

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her - 11 Monate 1 Woche her #169674 von b1994mi
COM_KUNENA_MESSAGE_REPLIED_NEW
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:
Last edit: 11 Monate 1 Woche her by b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her #169682 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Official LimeSurvey Partner - partnersurveys.com

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her #169690 von b1994mi
COM_KUNENA_MESSAGE_REPLIED_NEW
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
11 Monate 1 Woche her #169701 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW

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.
Official LimeSurvey Partner - partnersurveys.com
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her - 11 Monate 1 Woche her #169793 von b1994mi
COM_KUNENA_MESSAGE_REPLIED_NEW
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
Last edit: 11 Monate 1 Woche her by b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her - 11 Monate 1 Woche her #169823 von b1994mi
COM_KUNENA_MESSAGE_REPLIED_NEW
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:
Last edit: 11 Monate 1 Woche her by b1994mi.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her #169843 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Official LimeSurvey Partner - partnersurveys.com

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her #169847 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
...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.
Official LimeSurvey Partner - partnersurveys.com

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her #169849 von b1994mi
COM_KUNENA_MESSAGE_REPLIED_NEW
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
11 Monate 1 Woche her - 11 Monate 1 Woche her #169883 von tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Official LimeSurvey Partner - partnersurveys.com
Anhang:
Last edit: 11 Monate 1 Woche her by tpartner.
Folgende Benutzer bedankten sich: Ben_V, b1994mi

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
11 Monate 1 Woche her #169907 von b1994mi
COM_KUNENA_MESSAGE_REPLIED_NEW
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