- Posts: 41
- Thank you received: 1
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
- Topic Author
- Offline
- Senior Member
Less
More
3 years 5 months ago #207351
by squidy
Using LS 5.x
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)?
Is there a way to add upload buttons after each short text input (multi short text)?
Using LS 5.x
Attachments:
The topic has been locked.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11660
- Thank you received: 2742
3 years 5 months ago #207353
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
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.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
3 years 5 months ago - 3 years 4 months ago #207387
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
Sample survey attached:
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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 3 years 4 months ago by tpartner.
The topic has been locked.
- squidy
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 41
- Thank you received: 1
3 years 5 months ago #207392
by squidy
Using LS 5.x
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?
And if I want to put only one upload button after the last short text like the image attached?
Using LS 5.x
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
3 years 5 months ago #207396
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.