Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: Dropdown in Multiple short text

Dropdown in Multiple short text 4 years 8 months ago #69926

  • waitz
  • waitz's Avatar
  • Offline
  • Gold Lime
  • Posts: 171
  • Thank you received: 1
  • Karma: 3
Is it possible with javascript to change one of the short text fields in a Multiple short text into a standard dropdown list?

I managed with a lot of help to make a preselect dropdown, so I guess it is possible to make a standard dropdown also?
Version 1.91+ Build 11232 | PHP 5.3.9 | MySQL 5.1.56 |
The administrator has disabled public write access.

Dropdown in Multiple short text 4 years 8 months ago #69935

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6139
  • Thank you received: 1363
  • Karma: 535
Have a look at the Autocomplete workaround - docs.limesurvey.org/Workarounds%3A+Manip...y#and_later_versions
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Dropdown in Multiple short text 4 years 8 months ago #69948

  • waitz
  • waitz's Avatar
  • Offline
  • Gold Lime
  • Posts: 171
  • Thank you received: 1
  • Karma: 3
Thats an autocomplete, which I use elsewhere. What I am looking for now is a normal dropdown box.

If you for example accidentally make the wrong choice in the autocomplete above, the list will not open again until you remove the text which is there.
Version 1.91+ Build 11232 | PHP 5.3.9 | MySQL 5.1.56 |
The administrator has disabled public write access.

Dropdown in Multiple short text 4 years 8 months ago #69964

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6139
  • Thank you received: 1363
  • Karma: 535
Okay, to do that you will need to use JavaScript to:
- Define the select element (dropdown)
- Hide the text input
- Insert the select elements
- Initially select an option if the question has already been answered
- Insert selected values into the hidden text input when the dropdown is changed

Add the following script to the source of the your question.

Replace "QQ" with the question ID and "NN" with the row number of the text input you would like to replace.

Modify the HTML for the dropdown as required.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		var qID = QQ;
		var inputNum = NN;
 
		// 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>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Dropdown in Multiple short text 4 years 8 months ago #69982

  • waitz
  • waitz's Avatar
  • Offline
  • Gold Lime
  • Posts: 171
  • Thank you received: 1
  • Karma: 3
Yepp, fantastic! Thanks
Version 1.91+ Build 11232 | PHP 5.3.9 | MySQL 5.1.56 |
The administrator has disabled public write access.

Dropdown in Multiple short text 4 years 8 months ago #70010

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5974
  • Thank you received: 366
  • Karma: 260
waitz wrote:
Yepp, fantastic! Thanks
buddybeers.com/en :cheer:

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 9 months ago #86717

  • bogdant
  • bogdant's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 1
  • Karma: 0
Would it be possible to replace more text elements with dropdowns ?
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 9 months ago #86719

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6139
  • Thank you received: 1363
  • Karma: 535
Yes, simply repeat the script with different question IDs or row numbers.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 9 months ago #86752

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9293
  • Thank you received: 1327
  • Karma: 384
tpartner wrote:
Replace "QQ" with the question ID and "NN" with the row number of the text input you would like to replace.
Since 1.91 (or before) you can use :
var qid={QID}

;)
Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 6 months ago #90859

  • Gabriela
  • Gabriela's Avatar
  • Offline
  • Senior Lime
  • Posts: 64
  • Thank you received: 1
  • Karma: 0
is it possible to do the same with an answerID? (#answer1234566)
in a matrix text?
thanks
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 6 months ago #90886

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6139
  • Thank you received: 1363
  • Karma: 535
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: 3 years 6 months ago by tpartner.
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 6 months ago #90892

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6139
  • Thank you received: 1363
  • Karma: 535
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.
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 6 months ago #90919

  • Gabriela
  • Gabriela's Avatar
  • Offline
  • Senior Lime
  • Posts: 64
  • Thank you received: 1
  • Karma: 0
Great.! works. learning too..
merci
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 3 months ago #95277

  • ricardo
  • ricardo's Avatar
  • Offline
  • Expert Lime
  • Posts: 117
  • Thank you received: 1
  • Karma: 0
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
The administrator has disabled public write access.

Dropdown in Multiple short text 3 years 3 months ago #95279

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6139
  • Thank you received: 1363
  • Karma: 535
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.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.314 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form