Welcome, Guest
Username: Password: Remember me

TOPIC: Prefill array and hide unneeded rows

Prefill array and hide unneeded rows 3 years 3 months ago #59862

  • medicnick
  • medicnick's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 20
  • Karma: 0
I am building a survey and need to verify 4 fields of information for a vehicle. Each survey taker will have a different number of vehicles that need to be verified, from one to forty vehicles. This would work well in a data grid view so am thinking it would be easiest to mimic that as much as possible.

I'm also thinking that this would be an appropriate use of the Variable Length or Expandable Array workarounds if I could set a maximum number of rows and only display the rows that have pre-filled data available. The pre-filled data will come from the tokens table although I would prefer to have it pulled from a separate table.

I hope that I explained this clearly enough?? This is not a 'dynamic' array request but just hiding the rows that do not contain data. Do you think either of those workarounds could be modified to make this work? or do you have an alternative suggestion?

Lastly, I would like for two of the questions to be dropdowns. I have attached a screenshot to demonstrate.
Attachments:
Last Edit: 3 years 3 months ago by medicnick.
The administrator has disabled public write access.

Re: Prefill array and hide unneeded rows 3 years 3 months ago #59874

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4072
  • Thank you received: 748
  • Karma: 341
Let's do this in two steps.

Step 1 - Hide the empty rows of Q1, show the same number of rows in Q2 and load the license plate value into the labels of Q2 sub-questions.

Set up your survey to use JavaScript and add the following script to the source of one of the questions. Replace "AA" and "BB" with the Q1 and Q2 IDs respectively.

The comments describe the code fairly well but two things should be noted:
- The Q1 inputs must be pre-filled before firing this code
- The license plate values will not be stored in the data as labels for the Q2 sub-questions
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		handleRows(AA, BB);
 
		function handleRows(q1ID, q2ID) {
 
			// Loop through all Q1 rows
			$('#question'+q1ID+' tbody[id^="javatbd"]').each(function(i) {
 
				// Hide empty rows in Q1, show same number of rows in Q2 as in Q1
				if($('input[type="text"]:last', this).val() == '') { 
					$(this).hide(); 
					$('#question'+q2ID+' tbody[id^="javatbd"]:eq('+i+')').hide(); 
					$('#question'+q2ID+' tbody[id^="javatbd"]:eq('+i+') input[type="text"]').val('');
				}
				// Load the License plate numbers into the row labels of Q2
				else {
					$('#question'+q2ID+' tbody[id^="javatbd"]:eq('+i+') th').text($('input[type="text"]:last', this).val());
				}
 
			});
		}
	});
 
</script>

Step 2 - Insert select elements (dropdowns) into specified answer cells of Q2

Set up your survey to use JavaScript and add the following script to the source of one of the questions. Replace "BB" with the Q2 ID and modify the selects as necessary.

This code hides the text inputs in specified answer cells (columns 2 and 3 in this case) and inserts select elements. When a select is clicked, its value is inserted into the hidden text input.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		addDropdowns(BB);
 
		function addDropdowns(q2ID) {
 
			// Define the select elements (dropdowns)
			var select1 = '<select id="select1"> \
								<option value=""> --- </option> \
								<option value="Braun">Braun</option> \
								<option value="Horton">Horton</option> \
								<option value="Leader">Leader</option> \
								<option value="Medtec">Medtec</option> \
							</select>';
 
			var select2 = '<select id="select2"> \
								<option value=""> --- </option> \
								<option value="Type I">Type I</option> \
								<option value="Type II">Type II</option> \
								<option value="Type III">Type III</option> \
								<option value="Type IV">Type IV</option> \
							</select>';
 
			// Loop through all Q2 rows
			$('#question'+q2ID+' tbody[id^="javatbd"]').each(function(i) {
				// Add class to the cells to receive select elements
				$('td:eq(1)', this).addClass('dd1');	
				$('td:eq(2)', this).addClass('dd2');
			});
 
			// Hide the text inputs in select cells
			$('.dd1 input[type="text"], .dd2 input[type="text"]').hide();
 
			// Insert the select elements
			$(select1).prependTo('.dd1');
			$(select2).prependTo('.dd2');
 
 
			// Listener on the dropdowns - insert selected values into hidden text inputs
			$('#select1, #select2').change(function() { 
				$(this).next('label').children('input[type="text"]').val($('option:selected', this).val());
			});
		}
	});
 
</script>


So, to put it all together:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		handleRows(AA, BB);
		addDropdowns(BB);
 
		function handleRows(q1ID, q2ID) {
 
			// Loop through all Q1 rows
			$('#question'+q1ID+' tbody[id^="javatbd"]').each(function(i) {
 
				// Hide empty rows in Q1, show same number of rows in Q2 as in Q1
				if($('input[type="text"]:last', this).val() == '') { 
					$(this).hide(); 
					$('#question'+q2ID+' tbody[id^="javatbd"]:eq('+i+')').hide(); 
					$('#question'+q2ID+' tbody[id^="javatbd"]:eq('+i+') input[type="text"]').val('');
				}
				// Load the License plate numbers into the row labels of Q2
				else {
					$('#question'+q2ID+' tbody[id^="javatbd"]:eq('+i+') th').text($('input[type="text"]:last', this).val());
				}
 
			});
		}
 
		function addDropdowns(q2ID) {
 
			// Define the select elements (dropdowns)
			var select1 = '<select id="select1"> \
								<option value=""> --- </option> \
								<option value="Braun">Braun</option> \
								<option value="Horton">Horton</option> \
								<option value="Leader">Leader</option> \
								<option value="Medtec">Medtec</option> \
							</select>';
 
			var select2 = '<select id="select2"> \
								<option value=""> --- </option> \
								<option value="Type I">Type I</option> \
								<option value="Type II">Type II</option> \
								<option value="Type III">Type III</option> \
								<option value="Type IV">Type IV</option> \
							</select>';
 
			// Loop through all Q2 rows
			$('#question'+q2ID+' tbody[id^="javatbd"]').each(function(i) {
				// Add class to the cells to receive select elements
				$('td:eq(1)', this).addClass('dd1');	
				$('td:eq(2)', this).addClass('dd2');
			});
 
			// Hide the text inputs in select cells
			$('.dd1 input[type="text"], .dd2 input[type="text"]').hide();
 
			// Insert the select elements
			$(select1).prependTo('.dd1');
			$(select2).prependTo('.dd2');
 
 
			// Listener on the dropdowns - insert selected values into hidden text inputs
			$('#select1, #select2').change(function() { 
				$(this).next('label').children('input[type="text"]').val($('option:selected', this).val());
			});
		}
	});
 
</script>
Cheers,
Tony Partner

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: medicnick

Re: Prefill array and hide unneeded rows 3 years 3 months ago #59957

  • medicnick
  • medicnick's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 20
  • Karma: 0
Tony thank you so much! Your javascript tricks are really helpful for accommodating numerous types of requests.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.131 seconds
Donation Image