Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Fields are duplicating when page is reloaded for mandatory questions

More
2 years 10 months ago #238948 by ralfkunze
Fields are duplicating when page is reloaded for mandatory questions was created by ralfkunze
Hi,
I am using the Script of Tony Partner (dropdowns in arrays) for my Survey (thanks again, this helps A LOT) but for some reason the field are duplicating when the page is reloaded because mandatory questions were not answered. 
We are working with Limesurvey 5.3.24 and this is the script I am using:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects
    $('.answer-item.answer_cell_change', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
            <option value="" selected>Bitte auswählen</option>\
            <option value="1">Zunahme um</option>\
            <option value="0">Gleichbleibend</option>\
            <option value="2">Abnahme um</option>\
    </select>');  
 
 
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
 
  // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
 
    // Listener on column 2 inputs
    $('.answer-item.answer_cell_change input:text', thisQuestion).on('keyup change', function(e) {
        var thisValue = $.trim($(this).val());
            
        // Numerics only
        if($.isNumeric(thisValue) === false) {
                
            // Strip out non-numerics characters
            newValue = thisValue.replace(/\D/g,'');
            $(this).val(newValue).trigger('change');
        }
            
        // Max/min values
        var maxAllowed = 100;
        var minAllowed = 0;
        if (thisValue > maxAllowed) {
            alert('The maximum allowed is '+maxAllowed+'.');
            $(this).val(maxAllowed);
        }
        else if (thisValue < minAllowed) {
            alert('The minimum allowed is '+minAllowed+'.');
            $(this).val(minAllowed);
        }       
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>
 
And this is how it looks like when it is duplicated: 
[attachment=31896]lime.jpg[/attachment]
Can somebody help me to prevent the field from duplicating (or triplicating when you send it again without mandatory data)?
Thanks in advance, 
Ralf
 

Please Log in to join the conversation.

More
2 years 10 months ago #238953 by Joffm
Replied by Joffm on topic Fields are duplicating when page is reloaded for mandatory questions
Hi,
you ought to send a lss export of this question.

Now we can only guess.
Obviously there is a subquestion called "change" where you insert a dropdown.

BUT at the same time you check this column to only contain a number between 0 and 100. (though the dropdown only allows numbers 0,1,2.)
Here you see
Code:
   // Listener on column 2 inputs
    $('.answer-item.answer_cell_change input:text', thisQuestion).on('keyup change', function(e) {
        var thisValue = $.trim($(this).val());           
        // Numerics only
        if($.isNumeric(thisValue) === false) {
                
            // Strip out non-numerics characters
            newValue = thisValue.replace(/\D/g,'');
            $(this).val(newValue).trigger('change');
        }
            
        // Max/min values
        var maxAllowed = 100;
        var minAllowed = 0;
        if (thisValue > maxAllowed) {
            alert('The maximum allowed is '+maxAllowed+'.');
            $(this).val(maxAllowed);
        }
        else if (thisValue < minAllowed) {
            alert('The minimum allowed is '+minAllowed+'.');
            $(this).val(minAllowed);
        }       
    });

But even with this I cannot reproduce this issue (in 5.4.12.)
 

So there seems to be something else in your question.

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

Please Log in to join the conversation.

More
2 years 10 months ago #238963 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Sure - the lss is somehow too big, therefore find the lsq attached. Is this sufficient for finding out?
Ralf

Please Log in to join the conversation.

More
2 years 10 months ago #238964 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Oh and for clearing that up: not the question with the javascript is mandatory but the question before! And when you do no not enter a value in the question before it reloads the page and shows the field with the Javascript twice - as shown in the screenshot.

Please Log in to join the conversation.

More
2 years 10 months ago #238967 by Joffm
Replied by Joffm on topic Fields are duplicating when page is reloaded for mandatory questions
Hi,
still I do not see any screenshot.

And we ask for a lss export, because lsq and lsg exports are languages sensitive.
You can't import them into a survey with a different base language.
We have to create a new survey guessing the correct base language, create a group to be able to import the lsq.
Furthermore the system wide settings are missing which may be important, too 

Therefore we recommend to copy the survey, remove everything not related to the issue, and send this as lss export.

Please, ease the life of the volunteers.

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

Please Log in to join the conversation.

More
2 years 10 months ago #238985 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Hi Joffm, 
I am really sorry - I did not know about this significant difference between lsq and lss! Sure I'll provide an lss... see attached. 
I also did not see the screenshot and was confused but thought it was only on my side that I could not see it. I'll attached that again as well.  

File Attachment:

File Name: limesurvey...9484.lss
File Size:202.51 KB
 

Please Log in to join the conversation.

More
2 years 10 months ago - 2 years 10 months ago #238989 by Joffm
Replied by Joffm on topic Fields are duplicating when page is reloaded for mandatory questions
Hm,
sorry, I can't reproduce.
Neither in 5.4.13. CE nor in 5.4.12. Cloud Edition
Neither in "fruity" nor in "bootswatch". Do you use the "united" variation?
Or is it a more custiomized theme?
 

By the way.
Please revise this error in the script.
You want to check the second column which has the code "Wert".
From
Code:
    // Listener on column 2 inputs
    $('.answer-item.answer_cell_change input:text', thisQuestion).on('keyup change', function(e) {
        var thisValue = $.trim($(this).val());
to
Code:
    // Listener on column 2 inputs
    $('.answer-item.answer_cell_Wert input:text', thisQuestion).on('keyup change', function(e) {
        var thisValue = $.trim($(this).val());

Joffm

And another addition.
Would be nice to disable the column "Wert" if the respondent selects "Gleichbleiben". Then you set the "0" by an equation.
You find this in my Tutorial 1. Matrizen" in the German part., Chapter 1.2.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 years 10 months ago by Joffm.

Please Log in to join the conversation.

More
2 years 10 months ago #238999 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Hi Joffm,

thats too bad - but thanks for trying!
I am using an individualized version of bootswatch. But do you think it can be caused by the template?

Thanks for proposing a change for the 2nd column, I'll change that. Also thanks about the tipp about your tutorial - thats great! I thought about that but somehow did not get it too work.

Do you somehow see any opportunity to overcome this erratic behaviour of doubling the fields on my side? Because I just tested the lss again and as soon as I send the questionnaire without the filled mandatory fields, the fields double.
Ralf

Please Log in to join the conversation.

More
2 years 10 months ago #239005 by Joffm
Replied by Joffm on topic Fields are duplicating when page is reloaded for mandatory questions
Did you try with one of the standard themes?
Did you try in the demo installation?
[url] demo.limesurvey.org/index.php?r=admin [/url]
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
2 years 10 months ago #239014 by tpartner
Replied by tpartner on topic Fields are duplicating when page is reloaded for mandatory questions
I cannot reproduce the problem either but this should prevent duplicate drop-downs:

Code:
<script type="text/javascript" data-author="Tony Partner">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    if($('.inserted-select', thisQuestion).length == 0) {
      // Insert selects
      $('.answer-item.answer_cell_change', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
          <option value="" selected>Bitte auswählen</option>\
          <option value="1">Zunahme um</option>\
          <option value="0">Gleichbleibend</option>\
          <option value="2">Abnahme um</option>\
      </select>');  
 
 
      // Listeners
      $('.inserted-select', thisQuestion).on('change', function(i) {
        if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
        }
        else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
        }
      });
 
 
      // Returning to page
      $('.with-select input:text', thisQuestion).each(function(i) {
        var thisCell = $(this).closest('.answer-item');
        var inputText = $.trim($(this).val());
        $('select.inserted-select', thisCell).val(inputText);
      });
 
      // Listener on column 2 inputs
      $('.answer-item.answer_cell_change input:text', thisQuestion).on('keyup change', function(e) {
        var thisValue = $.trim($(this).val());
 
        // Numerics only
        if($.isNumeric(thisValue) === false) {
 
          // Strip out non-numerics characters
          newValue = thisValue.replace(/\D/g,'');
          $(this).val(newValue).trigger('change');
        }
 
        // Max/min values
        var maxAllowed = 100;
        var minAllowed = 0;
        if (thisValue > maxAllowed) {
          alert('The maximum allowed is '+maxAllowed+'.');
          $(this).val(maxAllowed);
        }
        else if (thisValue < minAllowed) {
          alert('The minimum allowed is '+minAllowed+'.');
          $(this).val(minAllowed);
        }     
      });
 
      // Clean-up styles
      $('select.inserted-select', thisQuestion).css({
        'max-width': '100%'
      });
      $('.with-select input:text', thisQuestion).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    }
  });
</script>
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: ralfkunze

Please Log in to join the conversation.

More
2 years 10 months ago #239146 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Hi,

sorry, I've been on the road the last days...

Thanks tpartner for the new Javascript - it works like a charm!
I would just have one more request: I am using this script also for a bigger table, where columns 1, 3 and 5 are using this script, while 2, 4 and 6 are numerical values. I used your new script and one older script to assign the dropdowns to the columns 1, 3 and 5. This is the result:
Code:
<script type="text/javascript" data-author="Tony Partner">
 
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
 
if($('.inserted-select', thisQuestion).length == 0) {
 
// Column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
 
// Insert selects into column 1
if($('.answer-item.column-1 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="" selected>Bitte auswählen...</option>\
<option value="1">Zunahme um</option>\
<option value="0">Gleichbleibend</option>\
<option value="2">Abnahme um</option>\
</select>');
}
 
// Insert selects into column 3
if($('.answer-item.column-3 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-3', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="" selected>Bitte auswählen...</option>\
<option value="1">Zunahme um</option>\
<option value="0">Gleichbleibend</option>\
<option value="2">Abnahme um</option>\
</select>');
}
 
// Insert selects into column 5
if($('.answer-item.column-5 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-5', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="" selected>Bitte auswählen...</option>\
<option value="1">Zunahme um</option>\
<option value="0">Gleichbleibend</option>\
<option value="2">Abnahme um</option>\
</select>');
}
 
// Listeners
$('.inserted-select', thisQuestion).on('change', function(i) {
if($(this).val() != '') {
$(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
}
else {
$(this).closest('.answer-item').find('input:text').val('').trigger('change');
}
});
 
// Returning to page
$('.with-select input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputText = $.trim($(this).val());
$('select.inserted-select', thisCell).val(inputText);
});
 
// Listener on column 2 inputs
$('.answer-item.answer_cell_change input:text', thisQuestion).on('keyup change', function(e) {
var thisValue = $.trim($(this).val());
 
// Numerics only
if($.isNumeric(thisValue) === false) {
 
// Strip out non-numerics characters
newValue = thisValue.replace(/\D/g,'');
$(this).val(newValue).trigger('change');
}
 
// Max/min values
var maxAllowed = 100;
var minAllowed = 0;
if (thisValue > maxAllowed) {
alert('The maximum allowed is '+maxAllowed+'.');
$(this).val(maxAllowed);
}
else if (thisValue < minAllowed) {
alert('The minimum allowed is '+minAllowed+'.');
$(this).val(minAllowed);
}
});
 
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
}
});
</script>

Is this code still correct?
Thanks, 
Ralf
 

Please Log in to join the conversation.

More
2 years 10 months ago #239148 by tpartner
Replied by tpartner on topic Fields are duplicating when page is reloaded for mandatory questions
I think you can get away with a single IF() statement to ensure the code only runs once:

Code:
<script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
     
    if($('.inserted-select', thisQuestion).length == 0) {
     
      // Column-specific classes
      $('tr.subquestion-list', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
      $(this).addClass('column-'+i);
      });
      });
       
      // Insert selects into column 1
      $('.answer-item.column-1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
      <option value="" selected>Bitte auswählen...</option>\
      <option value="1">Zunahme um</option>\
      <option value="0">Gleichbleibend</option>\
      <option value="2">Abnahme um</option>\
      </select>');
       
      // Insert selects into column 3
      $('.answer-item.column-3', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
      <option value="" selected>Bitte auswählen...</option>\
      <option value="1">Zunahme um</option>\
      <option value="0">Gleichbleibend</option>\
      <option value="2">Abnahme um</option>\
      </select>');
       
      // Insert selects into column 5
      $('.answer-item.column-5', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
      <option value="" selected>Bitte auswählen...</option>\
      <option value="1">Zunahme um</option>\
      <option value="0">Gleichbleibend</option>\
      <option value="2">Abnahme um</option>\
      </select>');
       
      // Listeners
      $('.inserted-select', thisQuestion).on('change', function(i) {
        if($(this).val() != '') {
          $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
        }
        else {
          $(this).closest('.answer-item').find('input:text').val('').trigger('change');
        }
      });
       
      // Returning to page
      $('.with-select input:text', thisQuestion).each(function(i) {
        var thisCell = $(this).closest('.answer-item');
        var inputText = $.trim($(this).val());
        $('select.inserted-select', thisCell).val(inputText);
      });
       
      // Listener on column 2 inputs
      $('.answer-item.answer_cell_change input:text', thisQuestion).on('keyup change', function(e) {
        var thisValue = $.trim($(this).val());
         
        // Numerics only
        if($.isNumeric(thisValue) === false) {
         
          // Strip out non-numerics characters
          newValue = thisValue.replace(/\D/g,'');
          $(this).val(newValue).trigger('change');
        }
         
        // Max/min values
        var maxAllowed = 100;
        var minAllowed = 0;
        if (thisValue > maxAllowed) {
          alert('The maximum allowed is '+maxAllowed+'.');
          $(this).val(maxAllowed);
        }
        else if (thisValue < minAllowed) {
          alert('The minimum allowed is '+minAllowed+'.');
          $(this).val(minAllowed);
        }
      });
       
      // Clean-up styles
      $('select.inserted-select', thisQuestion).css({
        'max-width': '100%'
      });
      $('.with-select input:text', thisQuestion).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    }
  });
</script>
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: ralfkunze

Please Log in to join the conversation.

More
2 years 10 months ago #239156 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Thanks a lot to tpartner - but also to Joffm!
Ralf

Please Log in to join the conversation.

More
2 years 10 months ago #239183 by ralfkunze
Replied by ralfkunze on topic Fields are duplicating when page is reloaded for mandatory questions
Sorry tpartner, 
I have another question: I am using still another javascript from you which allows to show to questions (text and radio button) beside each other. Unfortunately this script also doubles the first column (the text box column) when the page is re-loaded e.g. by mandatory values. But only the column, not the text boxes (see screenshot). 

Here is the script I am using: 
Code:
<script type="text/javascript" data-author="Tony Partner">
    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify the questions
        var qArrayID = {QID};
        var qArray = $('#question'+qArrayID);
        var qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
        var qMultiTextBis = qMultiText.nextAll('.multiple-short-txt:eq(0)');
 
        // Hide the multi-short-text question
        $(qMultiText).hide();
        $(qMultiTextBis).hide();
 
        // Remove the core column widths
        $('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto');
 
        // Insert the header cells
        $('table.questions-list thead td:eq(0)', qArray).after('<th class="answer-text inserted-column-label" /></th><th class="answer-text-bis inserted-column-label-bis" /></th>');
        $('.inserted-column-label, .inserted-column-label-bis', qArray).css('width','10%');
 
        // Insert the answer row cells
        $('tr.answers-list', qArray).each(function(i) {
            $('.answertext', this).after('<td class="answer-item text-item"></td><td class="answer-item text-item-bis"></td>');
        });
 
        // Load the column label for the text inputs
        $('.inserted-column-label:eq(0)', qArray).text($('.ls-label-question', qMultiText).text());
        $('.inserted-column-label-bis:eq(0)', qArray).text($('.ls-label-question', qMultiTextBis).text());
 
 
        // Loop through the multi-short-text sub-questions
        $('li.answer-item', qMultiText).each(function(i) {
            // Move the text inputs into the array
            $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
        });
 
        $('li.answer-item', qMultiTextBis).each(function(i) {
            // Move the text inputs into the array
            $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item-bis', qArray));
        });
    });
</script>

Could you please "repair" it in the same way you repaired the other scripts?
Thanks in advance, 
Ralf

Please Log in to join the conversation.

More
2 years 10 months ago #239184 by tpartner
Replied by tpartner on topic Fields are duplicating when page is reloaded for mandatory questions
Try this (untested):

Code:
<script type="text/javascript" data-author="Tony Partner">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify the questions
        var qArrayID = {QID};
        var qArray = $('#question'+qArrayID);
        var qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
        var qMultiTextBis = qMultiText.nextAll('.multiple-short-txt:eq(0)');
 
        if($('.inserted-column-label', qArray).length == 0) {
      // Hide the multi-short-text question
      $(qMultiText).hide();
      $(qMultiTextBis).hide();
   
      // Remove the core column widths
      $('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto');
   
      // Insert the header cells
      $('table.questions-list thead td:eq(0)', qArray).after('<th class="answer-text inserted-column-label" /></th><th class="answer-text-bis inserted-column-label-bis" /></th>');
      $('.inserted-column-label, .inserted-column-label-bis', qArray).css('width','10%');
   
      // Insert the answer row cells
      $('tr.answers-list', qArray).each(function(i) {
        $('.answertext', this).after('<td class="answer-item text-item"></td><td class="answer-item text-item-bis"></td>');
      });
   
      // Load the column label for the text inputs
      $('.inserted-column-label:eq(0)', qArray).text($('.ls-label-question', qMultiText).text());
      $('.inserted-column-label-bis:eq(0)', qArray).text($('.ls-label-question', qMultiTextBis).text());
   
   
      // Loop through the multi-short-text sub-questions
      $('li.answer-item', qMultiText).each(function(i) {
        // Move the text inputs into the array
        $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
      });
   
      $('li.answer-item', qMultiTextBis).each(function(i) {
        // Move the text inputs into the array
        $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item-bis', qArray));
      });
    }
    });
</script>
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: ralfkunze

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source