Adding textbox in basic array

More
1 year 5 months ago #166884 by krosser
Hi guys,

I would like to add a textbox for the option other in the simple array using Javascript and because I am a newbie in JS I ask for your help.
I have created an example question to illustrate what I need to make. Please see the screenshot below.



Or perhaps if possible to put textboxes inside the other column for replies.



This is needed for when the respondent checks the "other" and then can type in his answer.

Thanks in advance.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
1 year 5 months ago #166890 by Joffm
Replied by Joffm on topic Adding textbox in basic array
Hi,
I remember you are using the PRO edition V3.x.

So very probably the plugin "arrayTextAdapt" will not work.

But in your case:
How many cities will be there?
Without waiting and trying you could split the array into several single punch questions.

Like this


or this:


Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166893 by krosser
Yes, I am using 3.6 Pro version.

I see your point, but I have a request in my team to make such a question without splitting. I would rather create hidden subquestions with textboxes for when the other options are clicked. But it would be more neat if I make everything into one question.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166900 by holch
Replied by holch on topic Adding textbox in basic array
Then your only chance is to create a ticket with Limesurvey Pro and see if they can activate the Plugin or have any other solution.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166905 by krosser
Are you saying that it can't be done with JavaScript?

BTW arrayTextAdapt plugin doesn't work for radio buttons, which I want to use.
So it's radio buttons + textboxes for "the other".

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago - 1 year 5 months ago #166909 by tpartner
Of course it can be done with JavaScript. :)

Place a multiple-short-text question directly after the array. This question should have exactly the same sub-questions as the array.

Add this script to the source of the array:

<script type="text/javascript" charset="utf-8">
	$(document).on('ready pjax:scriptcomplete',function(){
		// Identify the questions
		var q1ID = {QID};
		var thisQuestion = $('#question'+q1ID);
		var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
		var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
		//Hide the multiple-short-text
		nextQuestion.hide();
 
		// Move the text inputs
		$('tr.answers-list', thisQuestion).each(function(i) {
			var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
			$('td.answer-item:last input[type="radio"]', this).css({
				'position': 'absolute',
				'left': '-9999em'
			});
			$('td.answer-item:last', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
		});
 
		// Listeners on the text inputs
		$('input[type="text"]', thisQuestion).on('keyup change', function(e) {
			var thisRadio = $(this).closest('td').find('input[type="radio"]');
			var thisRadioVal = thisRadio.val();
			if($.trim($(this).val()) != '') {
				$(thisRadio).trigger('click');
			}
			else {
				$(thisRadio).prop('checked', false);
				thisRadioVal = '';
			}
			// Reset Expression Manager
			checkconditions(thisRadioVal, $(thisRadio).attr('name'), 'radio', 'click');
		});
 
		// Listeners on the radios
		$('input[type="radio"]', thisQuestion).on('click', function(e) {
			if(!$(this).closest('td').hasClass('inserted-text-item')) {
				$(this).closest('tr').find('input[type="text"]').val('');
			}
		});
	});
</script>





Sample survey attached:

File Attachment:

File Name: limesurvey...2235.lss
File Size:23 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
Attachments:
Last edit: 1 year 5 months ago by tpartner.
The following user(s) said Thank You: RitaShen, krosser

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166910 by holch
Replied by holch on topic Adding textbox in basic array
Correcting my previous post:
Then you have two chances:
1. create a ticket with Limesurvey Pro and see if they have any other solution.
2. Find a javascript wizard --> You found him

:-)

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166911 by krosser
Oh my god! Holch, I'm so excited to test this out!! :D

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166912 by holch
Replied by holch on topic Adding textbox in basic array
Thank Tpartner, he is the wizard.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago - 1 year 5 months ago #166913 by krosser
Oh, I'm sorry guys! Tony, I got too excited about it :)
BTW it's worked nicely! You saved my ass, man. I've got a bunch of questions like this in my long-ass survey where 'other' needs a textbox...

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Last edit: 1 year 5 months ago by krosser.

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166914 by holch
Replied by holch on topic Adding textbox in basic array
Hmm, I imported the LSS file into an installation (so it's Version 3.6.2+180406) that I just set up to do some testing, but the workaround didn't work for me.

The boxes don't show.



"Filter HTML for XSS:" is OFF. Survey is not active, but it should show in the preview already, shouldn't it?

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Attachments:

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago - 1 year 5 months ago #166915 by tpartner

I've got a bunch of questions like this...

In that case, you should centralize the script with a jQuery plugin.

1) Assign a CSS class "with-array-comments" to all of the array questions where you want the text inputs inserted.


2) Add the following to the end of your theme custom.js file:

$(document).on('ready pjax:scriptcomplete',function(){
	// Apply the plugin to specific arrays
	$('.array-flexible-row.with-array-comments').arrayComments();
});
 
// A jQuery plugin insert comments into radio arrays
(function( $ ){
 
	$.fn.arrayComments = function(options) {  
 
		var opts = $.extend( {
		}, options);
 
		return this.each(function() { 
 
			// Identify the questions
			var thisQuestion = $(this);
			var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
			var thisQuestion = $('#question'+q1ID);
			var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
			var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
			//Hide the multiple-short-text
			nextQuestion.hide();
 
			// Move the text inputs
			$('tr.answers-list', thisQuestion).each(function(i) {
				var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
				$('td.answer-item:last input[type="radio"]', this).css({
					'position': 'absolute',
					'left': '-9999em'
				});
				$('td.answer-item:last', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
			});
 
			// Listeners on the text inputs
			$('input[type="text"]', thisQuestion).on('keyup change', function(e) {
				var thisRadio = $(this).closest('td').find('input[type="radio"]');
				var thisRadioVal = thisRadio.val();
				if($.trim($(this).val()) != '') {
					$(thisRadio).trigger('click');
				}
				else {
					$(thisRadio).prop('checked', false);
					thisRadioVal = '';
				}
				// Reset Expression manager
				checkconditions(thisRadioVal, $(thisRadio).attr('name'), 'radio', 'click');
			});
 
			// Listeners on the radios
			$('input[type="radio"]', thisQuestion).on('click', function(e) {
				if(!$(this).closest('td').hasClass('inserted-text-item')) {
					$(this).closest('tr').find('input[type="text"]').val('');
				}
			});
		});
 
	};
})( jQuery );

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 1 year 5 months ago by tpartner.
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166917 by tpartner
Holch, can you activate a test survey?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago - 1 year 5 months ago #166918 by holch
Replied by holch on topic Adding textbox in basic array
Here you go: [link removed as issue is solved]

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Last edit: 1 year 5 months ago by holch.

Please Log in or Create an account to join the conversation.

More
1 year 5 months ago #166920 by tpartner
I see the problem - it's because it's a new version so both the group and the question have an ID of "1".

Change this line:
var thisCode = $(this).attr('id').split('X'+q1ID)[1];

To this:
var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: holch

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!