How to Insert Answer via Javascript

Plus d'informations
il y a 1 semaine 4 jours - il y a 1 semaine 4 jours #169556 par b1994mi
b1994mi a créé le sujet : 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.
Pièces jointes :
Dernière édition: il y a 1 semaine 4 jours par b1994mi.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 4 jours #169572 par tpartner
tpartner a répondu au sujet : 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.
Les utilisateur(s) suivant ont remercié: LouisGac, b1994mi

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 2 jours - il y a 1 semaine 2 jours #169674 par b1994mi
b1994mi a répondu au sujet : 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:
Pièces jointes :
Dernière édition: il y a 1 semaine 2 jours par b1994mi.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 2 jours #169682 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 1 jour #169690 par b1994mi
b1994mi a répondu au sujet : 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:
Attention : Spoiler ! [ Cliquer pour agrandir ]


And here is how the question looks like:
Attention : Spoiler ! [ Cliquer pour agrandir ]

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 semaine 7 heures #169701 par tpartner
tpartner a répondu au sujet : 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.
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 6 jours 2 heures - il y a 6 jours 2 heures #169793 par b1994mi
b1994mi a répondu au sujet : 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
Dernière édition: il y a 6 jours 2 heures par b1994mi.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 jours 11 heures - il y a 5 jours 11 heures #169823 par b1994mi
b1994mi a répondu au sujet : 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):
Attention : Spoiler ! [ Cliquer pour agrandir ]

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:
Attention : Spoiler ! [ Cliquer pour agrandir ]

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>
Pièces jointes :
Dernière édition: il y a 5 jours 11 heures par b1994mi.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 jours 4 heures #169843 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 jours 4 heures #169847 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 jours 4 heures #169849 par b1994mi
b1994mi a répondu au sujet : 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
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 jours 22 heures - il y a 4 jours 22 heures #169883 par tpartner
tpartner a répondu au sujet : 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:

Fichier attaché :

Nom du fichier : limesurvey...6171.lss
Taille du ficher :19 ko



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Pièces jointes :
Dernière édition: il y a 4 jours 22 heures par tpartner.
Les utilisateur(s) suivant ont remercié: Ben_V, b1994mi

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 jours 9 heures #169907 par b1994mi
b1994mi a répondu au sujet : How to Insert Answer via Javascript
Wow, thank you very much for your help! I am really greatful for it ^_^

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!