Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Add upload button in multi short text

  • squidy
  • squidy's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 9 months ago #207351 by squidy
Add upload button in multi short text was created by squidy
Hi..
Is there a way to add upload buttons after each short text input (multi short text)?
Using LS 5.x
Upgrading to LS 6.x
Attachments:
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #207353 by holch
Replied by holch on topic Add upload button in multi short text
No, you will need to use the question of the type of upload.
Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 8 months ago #207387 by tpartner
Replied by tpartner on topic Add upload button in multi short text
If using version 3.x, you can place the file upload questions in pop-up modals and insert buttons to open those pop-ups.

After the multiple-short-text question, add a file upload question for each short-text sub-question.

Add this script to the source of the multiple-short-text question:

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify the questions
    var thisQID = {QID};
    var thisQuestion = $('#question'+thisQID);
    var subquestionsLength = $('.answer-item', thisQuestion).length;
    var qUploads = thisQuestion.nextAll('.upload-files:lt('+subquestionsLength+')');
 
    // Add some classes
    $(qUploads).each(function(i) {
      $(this).addClass('uploads-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
    // Insert the uploads buttons
    $('.answer-item', thisQuestion).each(function(i) {
      $('input:text', this).after('<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploads-'+thisQID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>');
    });
 
    // Handle uploads questions
    $(qUploads).each(function(i) {
      // Create modals
      $('body').append('<div class="modal uploads-modal" id="uploads-'+thisQID+'-'+(i+1)+'" tabindex="-1" role="dialog">\
                <div class="modal-dialog" role="document">\
                  <div class="modal-content">\
                    <div class="modal-header">\
                      <h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\
                    </div>\
                    <div class="modal-body">\
                    </div>\
                    <div class="modal-footer">\
                      <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move the Upload questions into modals
      $('#uploads-'+thisQID+'-'+(i+1)+' .modal-body').append($('.ls-answers', this));
 
    });
 
    // Interrupt the Next/Submit function (to put comments back in the form)
    $('#limesurvey').submit(function(e) {
      $('.uploads-modal[id^="uploads-'+thisQID+'-"]').each(function(i) {
        var qID = $('input:eq(0)', this).attr('id').split('X')[2];
        $('#question'+qID+' .answer-container').append($('.ls-answers', this));
      });
    });  
  });
</script>





Sample survey attached:

File Attachment:

File Name: limesurvey...5771.lss
File Size:25 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 8 months ago by tpartner.
The topic has been locked.
  • squidy
  • squidy's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 years 9 months ago #207392 by squidy
Replied by squidy on topic Add upload button in multi short text
Brilhant..
And if I want to put only one upload button after the last short text like the image attached?
Using LS 5.x
Upgrading to LS 6.x
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #207396 by tpartner
Replied by tpartner on topic Add upload button in multi short text
This may do it but, since you are changing the requirements on the fly, I'm not going to spend time testing it.

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify the questions
    var thisQID = {QID};
    var thisQuestion = $('#question'+thisQID);
    var subquestionsLength = $('.answer-item', thisQuestion).length;
    var qUploads = thisQuestion.nextAll('.upload-files:eq(0)');
 
    // Add some classes
    $(qUploads).addClass('uploads-question index-'+i).css({
      'position': 'absolute',
      'left': '-9999em'
    });
 
    // Insert the comments buttons
    $('.answer-item:last', thisQuestion).each(function(i) {
      $('input:text', this).after('<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploads-'+thisQID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>');
    });
 
    // Handle comments
    $(qUploads).each(function(i) {
      // Create modals
      $('body').append('<div class="modal uploads-modal" id="uploads-'+thisQID+'-'+(i+1)+'" tabindex="-1" role="dialog">\
                <div class="modal-dialog" role="document">\
                  <div class="modal-content">\
                    <div class="modal-header">\
                      <h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\
                    </div>\
                    <div class="modal-body">\
                    </div>\
                    <div class="modal-footer">\
                      <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move the Upload questions into modals
      $('#uploads-'+thisQID+'-'+(i+1)+' .modal-body').append($('.ls-answers', this));
 
    });
 
    // Interrupt the Next/Submit function (to put comments back in the form)
    $('#limesurvey').submit(function(e) {
      $('.uploads-modal[id^="uploads-'+thisQID+'-"]').each(function(i) {
        var qID = $('input:eq(0)', this).attr('id').split('X')[2];
        $('#question'+qID+' .answer-container').append($('.ls-answers', this));
      });
    });  
  });
</script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source