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

ralfkunze
Topic Author
Offline
Senior Member

More

2 years 1 month 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.

Joffm
Offline
LimeSurvey Community Team

More

2 years 1 month 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.

ralfkunze
Topic Author
Offline
Senior Member

More

2 years 1 month 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

Attachments:

...stion_8390.lsq

Please Log in to join the conversation.

ralfkunze
Topic Author
Offline
Senior Member

More

2 years 1 month 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.

Joffm
Offline
LimeSurvey Community Team

More

2 years 1 month 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.

ralfkunze
Topic Author
Offline
Senior Member

More

2 years 1 month 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:203 KB

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

2 years 1 month ago - 2 years 1 month 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 1 month ago by Joffm.

Please Log in to join the conversation.

ralfkunze
Topic Author
Offline
Senior Member

More

2 years 1 month 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.

Joffm
Offline
LimeSurvey Community Team

More

2 years 1 month 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.

tpartner
Offline
LimeSurvey Community Team

More

2 years 1 month 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.

ralfkunze
Topic Author
Offline
Senior Member

More

2 years 1 month 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.

tpartner
Offline
LimeSurvey Community Team

More

2 years 1 month 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.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Fields are duplicating when page is reloaded for mandatory questions

File Attachment:

Lime-years ahead

Legal

About Us

Open Source