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> 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><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>
