Dropdown in Multiple short text

More
4 years 9 months ago - 4 years 9 months ago #90886 by tpartner
tpartner replied the topic: Dropdown in Multiple short text
Sure, you can use this with IDs of array text inputs as selectors.

To use an example similar to your other post about time inputs, this code will insert the dropdowns in the first column of the array:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		// Text inputs to be replaced by dropdowns
		var dropdownAnswers = $('#answer97841X5X16SQ001_SQ001, #answer97841X5X16SQ002_SQ001, #answer97841X5X16SQ003_SQ001');
 
		// Define the select element (dropdown)
		var select1 = '<select class="select1 insertedSelect"> \
							<option value="">-- Please Choose --</option> \
							<option value="Apples">Apples</option> \
							<option value="Oranges">Oranges</option> \
							<option value="Pears">Pears</option> \
							<option value="Bananas">Bananas</option> \
						</select>';
 
		// Hide the text inputs
		$(dropdownAnswers).hide();
 
		// Insert the select elements
		$(dropdownAnswers).parents('td').append(select1);
 
		// Initially select an option if the question has already been answered
		$('.insertedSelect').each(function(i) {
			if($(this).parent().find('input[type="text"]').val()) {
				$(this).val($(this).parent().find('input[type="text"]').val())
			}
		});
 
		// Listener on the dropdowns - insert selected values into hidden text inputs
		$('.insertedSelect').change(function() {
			$(this).parent().find('input[type="text"]').val($(this).val());
		});
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 4 years 9 months ago by tpartner.

Please Log in to join the conversation.

More
4 years 9 months ago #90892 by tpartner
tpartner replied the topic: Dropdown in Multiple short text
Oops, found a bug, use this instead:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		// Text inputs to be replaced by dropdowns
		var dropdownAnswers = $('#answer97841X5X16SQ001_SQ001, #answer97841X5X16SQ002_SQ001, #answer97841X5X16SQ003_SQ001');
 
		// Define the select element (dropdown)
		var select1 = '<select class="select1 insertedSelect"> \
							<option value="">-- Please Choose --</option> \
							<option value="Apples">Apples</option> \
							<option value="Oranges">Oranges</option> \
							<option value="Pears">Pears</option> \
							<option value="Bananas">Bananas</option> \
						</select>';
 
		// Hide the text inputs
		$(dropdownAnswers).hide();
 
		// Insert the select elements
		$(dropdownAnswers).closest('td').append(select1);
 
		// Initially select an option if the question has already been answered
		$('.insertedSelect').each(function(i) {
			if($(this).parent().find('input[type="text"]').val()) {
				$(this).val($(this).parent().find('input[type="text"]').val())
			}
		});
 
		// Listener on the dropdowns - insert selected values into hidden text inputs
		$('.insertedSelect').change(function() {
			$(this).parent().find('input[type="text"]').val($(this).val());
		});
	});
</script>

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

Please Log in to join the conversation.

More
4 years 9 months ago #90919 by Gabriela
Gabriela replied the topic: Dropdown in Multiple short text
Great.! works. learning too..
merci

Please Log in to join the conversation.

More
4 years 5 months ago #95277 by ricardo01
ricardo01 replied the topic: Dropdown in Multiple short text
Hi,
I created a multiple short text question and want the first row to display as a dropdown. I'm sure this is what I need. I copied this script and modified it using my QID

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 9334;
var inputNum = 1;

// Define the select element (dropdown)
var select1 = '<select id="select1"> \
<option value="">-- Please Choose --</option> \
<option value="Mrs.">Mrs.</option> \
<option value="Mr.">Mr.</option> \
<option value="Doctor">Doctor</option> \
<option value="Miss">Miss</option> \
<option value="Other">Other</option> \

</select>';

// Hide the text input
$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').hide().parent().hide();

// Insert the select elements
$('#question'+qID+' li:eq('+(inputNum-1)+')').append(select1);

// Initially select an option if the question has already been answered
if($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val()) {
$('#question'+qID+' li:eq('+(inputNum-1)+') select').val($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val())
}

// Listener on the dropdowns - insert selected values into hidden text input
$('#question'+qID+' select').change(function() {
$(this).siblings('span').children('input.text').val($(this).val());
});

// Some styles
$('#question'+qID+' select').css({
'margin':'0.3em 0 0 1em'
});
});

</script>

However the first row is still empty...no dropdown anywhere. I'm using LS Version 2.00+ Build 130423

Please Log in to join the conversation.

More
4 years 5 months ago #95279 by tpartner
tpartner replied the topic: Dropdown in Multiple short text
You have an extra line in the dropdown definition that may be causing an error. Try this:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		var qID = 9334;
		var inputNum = 1;
 
		// Define the select element (dropdown)
		var select1 = '<select id="select1"> \
							<option value="">-- Please Choose --</option> \
							<option value="Mrs.">Mrs.</option> \
							<option value="Mr.">Mr.</option> \
							<option value="Doctor">Doctor</option> \
							<option value="Miss">Miss</option> \
							<option value="Other">Other</option> \
						</select>';
 
		// Hide the text input
		$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').hide().parent().hide();
 
		// Insert the select elements
		$('#question'+qID+' li:eq('+(inputNum-1)+')').append(select1);
 
		// Initially select an option if the question has already been answered
		if($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val()) {
			$('#question'+qID+' li:eq('+(inputNum-1)+') select').val($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val());
		}
 
		// Listener on the dropdowns - insert selected values into hidden text input
		$('#question'+qID+' select').change(function() {
			$(this).siblings('span').children('input.text').val($(this).val());
		});
 
		// Some styles
		$('#question'+qID+' select').css({
			'margin':'0.3em 0 0 1em'
		});
	});
</script>

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

Please Log in to join the conversation.

More
4 years 5 months ago #95283 by ricardo01
ricardo01 replied the topic: Dropdown in Multiple short text
Thanks, it worked...are you talking about this line?




I thought java scripts were immune to that?

cheers,

ricardo
Attachments:

Please Log in to join the conversation.

More
4 years 5 months ago - 4 years 5 months ago #95297 by tpartner
tpartner replied the topic: Dropdown in Multiple short text

...are you talking about this line?

Yes.

I thought java scripts were immune to that?

Not when you have a variable (string) which spans several lines. In that case, every line must end with a backslash character '\'. You could put the whole string on one line but it would be kinda hard to read.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 4 years 5 months ago by tpartner.

Please Log in to join the conversation.

More
4 years 5 months ago #95300 by ricardo01
ricardo01 replied the topic: Dropdown in Multiple short text
Thanks, Tony.

Please Log in to join the conversation.

More
4 years 5 months ago - 4 years 5 months ago #95322 by Limer2001
Limer2001 replied the topic: Dropdown in Multiple short text
Can you (Ricardo,Tony?) post a limesurvey question file or survey file of this working. I can't get it to work.
Last Edit: 4 years 5 months ago by Limer2001.

Please Log in to join the conversation.

More
4 years 5 months ago #95324 by tpartner
tpartner replied the topic: Dropdown in Multiple short text
Here you go. For portability, in this test survey I replaced the question ID (9334) with the {QID} placeholder.

File Attachment:

File Name: limesurvey...9411.lss
File Size:16 KB

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

Please Log in to join the conversation.

More
4 years 5 months ago #95330 by Limer2001
Limer2001 replied the topic: Dropdown in Multiple short text
Thank you so much. With the QID placeholder it's working!

Please Log in to join the conversation.

More
1 year 11 months ago #128124 by petergi
petergi replied the topic: Dropdown in Multiple short text
Hi all,
the solution presented by tpartner is going into the direction I am looking for, i.e. embedding drop downs into possible answers. However, what I need is to place the drop down not at the end of an answer but rather somewhere in the sentence.
Example:

'I am looking for <dropdown> a / the </dropdown> solution.'

The user then has to select his answer only through the drop down.

Any hint for a solution is greatly appreciated.

Thanks
Peter

Please Log in to join the conversation.

More
1 month 4 days ago #158512 by ColinBrose
ColinBrose replied the topic: Dropdown in Multiple short text
Hi Tony,

Thanks for your solution. I copied your script into the source of the corresponding question but for some reason, it there is no change to the short text field in row 2, which I want to replace with a dropdown:

<p><span style="font-size:18px;">FRAGEBOGEN</span></p>
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 134;
var inputNum = 2;

// Define the select element (dropdown)
var select1 = '<select id="select1"> \
<option value="">-- Please Choose --</option> \
<option value="Apples">Apples</option> \
<option value="Oranges">Oranges</option> \
<option value="Pears">Pears</option> \
<option value="Bananas">Bananas</option> \
</select>';

// Hide the text input
$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').hide().parent().hide();

// Insert the select elements
$('#question'+qID+' li:eq('+(inputNum-1)+')').append(select1);

// Initially select an option if the question has already been answered
if($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val()) {
$('#question'+qID+' li:eq('+(inputNum-1)+') select').val($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val())
}

// Listener on the dropdowns - insert selected values into hidden text input
$('#question'+qID+' select').change(function() {
$(this).siblings('span').children('input.text').val($(this).val());
});

// Some styles
$('#question'+qID+' select').css({
'margin':'0.3em 0 0 1em'
});
});

</script>


Do you have any Ideas? Has anything changed for Version 2.67.3?

Thanks!

Please Log in to join the conversation.

More
1 month 4 days ago #158539 by tpartner
tpartner replied the topic: Dropdown in Multiple short text
This is a 4-year-old thread so, yes, many things have changed.

Please start a new thread explaining exactly what you want to achieve.

Having said that, I am on vacation, responding via phone, so will not be able to contribute any code for at least 2 weeks.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
1 month 3 days ago #158573 by ColinBrose
ColinBrose replied the topic: Dropdown in Multiple short text
Thanks for the hint, have a nice holiday!

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now