Welcome, Guest
Username: Password: Remember me

TOPIC: Writing in a boilerplate

Writing in a boilerplate 2 years 7 months ago #70274

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
I would like to know how Can I modify a text -by javascript- inside a boilerplate field.

I´ve tried some different commands like .val(), .text() but I am not getting write a text in a boilerplate. I think I couldn´t do that, however I wouldn´t like to use a text field. Do you have some suggestion?

Anyone knows How Can I do that?
Since now I Thanks,
Jefferson Mello.
The administrator has disabled public write access.

Re: Writing in a boilerplate 2 years 7 months ago #70339

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
So,

I´m doing a form about the "Capital Distribution of a Company". In this form the user will fill two fields.

The first one is a dropdown list with the name of countries and the last one is a numeric value that represents the country's participation in the company (in %).

So, the boilerplate in the bottom of the survey should have some information like that: "0/100". The first number is the subtotal that will be updated when the user fills some of the numeric field.

This form is a "mix" of two examples. The first has the multiple arrays and the other has the bottoms to add and remove a row. After I finish it, I will post here.

Thanks
Jefferson.

form_example.png
The administrator has disabled public write access.

Re: Writing in a boilerplate 2 years 7 months ago #70349

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5300
  • Thank you received: 291
  • Karma: 247
Firstly you have to define a place at the boilerplate where the text should be added using some JS. You can easily add a SPAN element to the boilerplate question using the source code mode of the editor and assign a certain ID to the span which you can then reference and populate using JS.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Writing in a boilerplate 2 years 7 months ago #70660

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
My first contribution with the community, thank you Mazi for your help. It's a basic code, some improvement will be welcome!

This code puts the one line with the "header" of the form and other five rows to user inputs ( 1 dropdown and 1 numeric field).
In the bottom has the Total of the (%).
The next or submit buttom only is enabled after complete 100%.
<br />
<script type="text/javascript" charset="utf-8">
 
    var NumberOfRows = 1; /* Control the current number of rows */
    qID = 264;            /* ID of the last element before the buttoms */ 
    MAX_NUMBER_ROWS = 5;  /* Constant with the maximum number of rows */
 
    $(document).ready(function() {
 
        /*********** 
        Display multiple questions side by side
        ***********/
 
        if ($('div.qRow1').length == 0) {
 
            //////// Add question classes for later use ////////
 
            // Give questions row specific attributes so we can easily manipulate them by row
            $('#question268, #question269, #question270').addClass('qRow0 inlineQuestion');
            $('#question242, #question243, #question244').addClass('qRow1 inlineQuestion');
            $('#question245, #question246, #question247').addClass('qRow2 inlineQuestion');
            $('#question249, #question250, #question251').addClass('qRow3 inlineQuestion');
            $('#question252, #question253, #question254').addClass('qRow4 inlineQuestion');
            $('#question255, #question256, #question257').addClass('qRow5 inlineQuestion');
            $('#question264').addClass('qRow6 inlineQuestion');
 
            // Give questions column specific classes so we can easily manipulate them by column
            $('#question268,#question242, #question245, #question249, #question252, #question255').addClass('qCol1');
            $('#question269,#question243, #question246, #question250, #question253, #question256').addClass('qCol2');
            $('#question270,#question244, #question247, #question251, #question254, #question257').addClass('qCol3');
            $('#question264').addClass('qCol4');
 
            createButtons();
 
            //////// Survey layout manipulation ////////
 
            // Fix the width of the survey
            $( 'table.outerframe' ).css({
                'width': '900px'
            });
 
            // Wrap each row in a div
            $('.qRow0').wrapAll('<div id="inlineWrapper0" />');
            $('.qRow1').wrapAll('<div id="inlineWrapper1" />');
            $('.qRow2').wrapAll('<div id="inlineWrapper2" />');
            $('.qRow3').wrapAll('<div id="inlineWrapper3" />');
            $('.qRow4').wrapAll('<div id="inlineWrapper4" />');
            $('.qRow5').wrapAll('<div id="inlineWrapper5" />');
            $('.qRow6').wrapAll('<div id="inlineWrapper6" />');
 
            $('#inlineWrapper5').hide();
            $('#inlineWrapper4').hide();
            $('#inlineWrapper3').hide();
            $('#inlineWrapper2').hide();
 
            // Style the wrapper divs
            $( '#inlineWrapper0, #inlineWrapper1, #inlineWrapper2, #inlineWrapper3, #inlineWrapper4, #inlineWrapper5' ).css({
                'width': '850px',
                'margin': '0 auto 0 auto',
                'clear': 'both'
            });
 
 
            // Get all the questions to sit politely side by side
            $( '.qRow0, .qRow1, .qRow2, .qRow3, .qRow4, .qRow5' ).css({
                'float': 'left'    
            });
 
            // Get all the questions to sit politely side by side
            $( '.qRow6' ).css({
                'float': 'right'    
            });
 
 
            //$( '.inlineQuestion .survey-question-help' ).parent().hide();
 
            //////// Column manipulation ////////
 
            // Set the column widths - can be set individually if necessary
            // Must add up to less than 100%
            $( '.qCol1' ).css({
                'width': '10%'
            });
 
            $( '.qCol2, .qCol3' ).css({
                'width': '40%'
            });
 
            //////// Question manipulation ////////
 
            $( '.inlineQuestion' ).css({
                //'margin':'10px 0px 0px 10px',
                'height':'50px',
                'overflow':'hidden'
            });
 
            // Hide the answer element in boilerplate questions
            //$( 'div.boilerplate td.answer' ).parent().hide();
 
            // Hide the question text elements in non-boilerplate questions
            $('div.list-dropdown td.questiontext, div.numeric td.questiontext, div.text td.questiontext').parent().hide();
 
            // Push the question tables to 100%
            $( 'div.qRow0 table, div.qRow1 table, div.qRow2 table, div.qRow3 table, div.qRow4 table, div.qRow5 table' ).css({
                'width': '100%'
            });
 
            // Push the question tables to 100%
            $( 'div.qRow6 table' ).css({
                'width': '10%'
            });
 
            // Get everything to line up nicely vertically
            $( 'td.questiontext' ).css({
                'height':'50px',
                'text-align': 'center',
                'overflow':'hidden'
            });
 
            // Get everything to line up nicely vertically
            $( 'td.answer p' ).css({
                'text-align': 'center'
            });
 
            // Get everything to line up nicely vertically
            $( 'div.boilerplate' ).css({
                'text-align': 'center'
            });
 
            // Adjust cell heights so everything lines up nicely horizontally
            $( 'td.answer' ).css({
                'height':'35px',
                'overflow':'hidden'
            });
 
            // Numeric question styles
            $( 'div.numeric input' ).css({
                'width': '50px',
                'margin-left': '0'
            });
 
            $( 'div.numeric p.tip' ).css({
                'display': 'none'
            });
 
            // Reduce the space caused by the question help table
            $( '.qRow0, .qRow1, .qRow2, .qRow3, .qRow4, .qRow5, .qRow6' ).css({
                'margin-top': '10px'
            });
 
            $('#question264 span.insertedText').text('0/100');
 
            $('input[type="submit"]').attr('disabled', 'disabled');
 
            // Style the last Text Field with the %
            $( '#inlineWrapper6' ).css({
                'width': '50px',
                'height': '25px',  
                'margin': '0 auto 25px 800px',
                'clear': 'both'
            });
 
            // Call the functions below when clicked
            $( 'div#addButton'+qID ).click( function (event) {
                    addRow(qID);
            });
 
            $( 'div#removeButton'+qID ).click(function (event) {
                    removeRow(qID);
            });
 
            updateTotalDist();
 
        }
 
 
        function createButtons(){
 
                // The HTML content of the Add/Remove elements - modify as you wish
                var addContent = '[+]';
                var removeContent = '[-]';
 
                // Create the Add and Remove elements & insert them
                var el1 = document.createElement('div');
                el1.setAttribute('id','addButton'+qID);
                document.body.appendChild(el1);
 
                var el2 = document.createElement('div');
                el2.setAttribute('id','removeButton'+qID);
                document.body.appendChild(el2);
 
                // Move them to after the array
                $( 'div#addButton'+qID ).appendTo( $( '#question' + qID ).parent() );
 
                $( 'div#removeButton'+qID ).appendTo( $( '#question' + qID ).parent() );
 
                // Insert their HTML
                $( 'div#addButton'+qID ).html( addContent );
                $( 'div#removeButton'+qID ).html( removeContent );
 
                // Style the elements - you can modify here if you wish
                $( 'div#addButton'+qID ).css({
                    'margin':'10px 0 0 10px',
                    'padding':'1px',
                    'text-align':'center',
                    'font-weight':'bold',
                    'width':'auto',
                    'cursor':'pointer',
                    'float':'left'
                });
 
                $( 'div#removeButton'+qID ).css({
                    'margin':'10px 0 0 10px',
                    'padding':'1px',
                    'text-align':'center',
                    'font-weight':'bold',
                    'width':'auto',
                    'cursor':'pointer',
                    'float':'left'
                });
 
                // Initially hide the Remove element
                $( 'div#removeButton'+qID ).hide();
        }
 
        // Function to add a row, also shows the Remove element and hides the 
        //Add element if all rows are shown
        function addRow(qID) {
 
               NumberOfRows = NumberOfRows + 1;
               $( '#inlineWrapper'+NumberOfRows ).show();
               $( 'div#removeButton'+qID ).show();
 
               if ( NumberOfRows == MAX_NUMBER_ROWS )  {
                     $( 'div#addButton'+qID ).hide();
               }
        }
 
        // Function to remove a row, also clears the contents of the removed row, 
        // shows the Add element if the last row is hidden and hides the Remove 
        // element if only the first row is shown
        function removeRow(qID) {
 
              $( 'div.numeric:eq('+(NumberOfRows-1)+') input').val('');
              $("div.list-dropdown option:first-child").eq(NumberOfRows-1).attr("selected","selected"); 
 
              $( '#inlineWrapper'+NumberOfRows ).hide();
              NumberOfRows = NumberOfRows - 1;
              $( 'div#addButton'+qID ).show();
 
              if ( NumberOfRows == 1 )  {
                   $( 'div#removeButton'+qID ).hide();
              }
        }
 
        function updateTotalDist() {
           var oldValue;
 
           $( 'div.numeric input' ).focus(function (event) {
 
                  oldValue = $(this).val(); 
 
                  if ( oldvalue == '')
                      oldValue = 0;
                  oldValue = parseInt(oldValue); 
 
           });
 
           $( 'div.numeric input' ).change(function (event) {
                 var distribution = $('#question264 span.insertedText').text().split('/');
                 //avoid problems to update the same field
                 distribution[0] = parseInt(distribution[0]) - oldValue;
                 distribution[0] = parseInt(distribution[0]) + parseInt( $(this).val() );
                 $('#question264 span.insertedText').text( distribution[0] +'/'+distribution[1]);
                 $(this).blur();
                 if ( distribution[0] == 100 || distribution[0] == 99 || distribution[0] == 99.9 || distribution[0] == 99.999 )
             	     $('input[type="submit"]').attr('disabled', '');
                 else
                     $('input[type="submit"]').attr('disabled', 'disabled');
 
           });
 
 
       }
 
   });
 
 
</script>
Last Edit: 2 years 7 months ago by jsmello.
The administrator has disabled public write access.

Re: Writing in a boilerplate 2 years 7 months ago #70663

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5300
  • Thank you received: 291
  • Karma: 247
Please add your solution at manual -> workarounds ->JavaScript as well because the forum is wiped out regularly.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Writing in a boilerplate 2 years 7 months ago #70664

  • jsmello
  • jsmello's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 32
  • Karma: 0
Ok, I thought only the administrators could do that.
The administrator has disabled public write access.

Re: Writing in a boilerplate 2 years 7 months ago #70673

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5300
  • Thank you received: 291
  • Karma: 247
url=http://docs.limesurvey.org/tiki-index.php?page=English+Instructions+for+LimeSurvey]Our manual[/url] is a wiki, everyone can edit it and you can't do much wrong.
So just add this information. Thanks!

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.235 seconds
Donation Image