Welcome to the LimeSurvey Community Forum

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

Choix Multiples dans un tableau

  • srauld
  • srauld's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 7 months ago #231390 by srauld
Choix Multiples dans un tableau was created by srauld
Aidez-nous à vous aider et remplissez les cases appropriées :
Votre version de LimeSurvey : Version de votre LimeSurvey : Version 5.3.30
Votre propre serveur ou LimeSurvey Cloud : Propre serveur
Thème :

==================
Bonjour,

J'aimerai mettre des choix multiples de façon répétée dans chaque cellule d'un tableau (voir capture).
J'ai réussi à multiplier les cases à cocher mais je n'arrive pas à récupérer les valeurs des cases cochées : Voici le script utilisé : 
Code:
<script type="text/javascript" charset="utf-8">
 
    $(document).on('ready pjax:scriptcomplete',function(){
        var thisQuestion = $('#question{QID}');
 
        // 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="">Choisir...</option>\
                <option value="1">Maison > Porte</option>\
                <option value="2">Maison > Sous-sol</option>\
            </select>');
        } 
 // Insert selects into column 2
        if($('.answer-item.column-2 .inserted-checkbox', thisQuestion).length == 0) {
            $('.answer-item.column-2', thisQuestion).addClass('with-select').append('<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Lundi" /> Lundi \
<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Mardi" /> Mardi <br/>\
<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Mercredi"/> Mercredi \
<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Jeudi"/> Jeudi <br/>\
<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Vendredi"/> Vendredi<br/> \
<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Samedi"/> Samedi <br/>\
<INPUT class="dayBox" type="checkbox" name="jourSemaine" value="Dimanche"/> Dimanche \
');
        } 
        // Listeners on select elements
        $('.inserted-select', thisQuestion).on('change', function(i) {
            if($(this).val() != '') {
                $(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).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());
            var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
            $('select.inserted-select', thisCell).val(selectval);
        });
 
          
    // Listeners on chekbox elements
        $('.inserted-checkbox', thisQuestion).on('change', function(i) {
            if($(this).val() != '') {
           
                $(this).closest('.answer-item').find('input:checkbox').val($.trim($($.attr('checked'), this).text())).trigger('change');
            }
            else {
                $(this).closest('.answer-item').find('input:checkbox').val('').trigger('change');
            }
        });
 
        // Returning to page checkbox
        $('.with-select input:checkbox', thisQuestion).each(function(i) {
            var thisCell = $(this).closest('.answer-item').attr('checked');
             var inputText = $.trim($(this).val());
            var selectval = $('input.inserted-checkbox', thisCell).filter(function () { return $(this).html() == inputText; }).val();
            $('input.inserted-checkbox', thisCell).val(selectval);
           //alert(selectval);
        });
 
 
        // Clean-up styles
        $('select.inserted-select', thisQuestion).css({
            'max-width': '100%'
        });
      
        $('.with-select input:text', thisQuestion).css({
            'position': 'absolute',
            'left': '-9999em'
        });
      
 
 
      
    });
Merci pour votre aide.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231392 by Joffm
Replied by Joffm on topic Choix Multiples dans un tableau
Bien sûr que non.
Vous n'avez pas non plus de champs dans la base de données. Vous ne les avez affichés que visuellement.

Mais je peux vous suggérer ceci.
 
Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Column-specific classes
    $('tr.subquestion-list', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert selects
    $('.answer-item.column-1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
                <option value="">Choisir...</option>\
                <option value="1">Maison > Porte</option>\
                <option value="2">Maison > Sous-sol</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);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
 
    // Insert checkboxes
    $('.answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5, .answer-item.column-6, .answer-item.column-7, .answer-item.column-8', thisQuestion).addClass('custom-checkbox-item');
    $('.custom-checkbox-item', thisQuestion).each(function(i) {
      var thisID = $('input:text:eq(0)', this).attr('id');
      $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
      if($('input:text:eq(0)', this).val() == 'Y') {
        $('input:checkbox:eq(0)', this).prop('checked', true);
      }
      $(this).removeClass('text-item').addClass('checkbox-item');
      $('input:text:eq(0)', this).remove();
    });
  });
</script>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
  // Insert the column categories
  $('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
    <td rowspan="1" colspan="1" style="border-bottom:0 !important;background-color:transparent"></td>\
    <td rowspan="1" colspan="1" style="border-bottom:0 !important;background-color:transparent"></td>\
    <th class="answer-text inserted-header" colspan="7" style="text-align:center;font-size:11pt;color:maroon;">Jours de la semaine</th>\
    <td rowspan="1" colspan="1" style="border-bottom:0 !important"></td>\
  </tr>');
});
</script>
 
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
  });
</script>
​​​​​
Code:
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 18%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 60%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 12%; }
</style>

Joffm
 

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

Please Log in to join the conversation.

  • srauld
  • srauld's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 7 months ago #231397 by srauld
Replied by srauld on topic Choix Multiples dans un tableau
Oui, votre proposition me convient !
Très bonne idée !
Sur quelle base de tableau dois-je procéder ?
Tableau en colonnes je suppose ?

Merci pour votre aide.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231399 by Joffm
Replied by Joffm on topic Choix Multiples dans un tableau
Tableau(text)

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

Please Log in to join the conversation.

  • srauld
  • srauld's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 7 months ago #231402 by srauld
Replied by srauld on topic Choix Multiples dans un tableau
Merci beaucoup cela fonctionne très bien !

Bonne journée !

Please Log in to join the conversation.

Moderators: Nickko

Lime-years ahead

Online-surveys for every purse and purpose