Question

Append rows to the rows populated by a data source or variable

Forms

Updated February 22, 2019

asked on February 21, 2019

I am creating a forms and would like the number of rows to be based on an answer to a question. So if a number field above says 10, i would like the number of the rows in the table to be a hard 10 rows.

Example: my question is how many hotel rooms are needed? If they put 10, i want them to answer with 10 names.

0 0

Replies

replied on February 21, 2019 • Show version history

Hi Laura,

The following Javascript:

(function() {
  $(document).ready(function() {    
    $('a#q4').hide();
    
    $('.number input').change(function() {      
      var number = $('.number input').val();
      
      for (i = 1; i < number; i++) {
        $('a#q4').click();
      }
      $('a#q4').hide();
    });    
  });
})();

Worked for this form:

Results:

You can remove the $('a#q4').hide(); lines if you want them to be able to use the 'Add' link to add/remove rows on their own.

Best,

Rob

0 0

replied on February 21, 2019

It got me pretty close. If i chose 1, nothing, if i chose 2 1 line, 3 then 3 lines, 4 then 6 lines, 5 then 10 lines, 6 got fifteen. but if i refreshed and started with 6 rooms i got 5 lines.

These are my screen shots

1.jpg (44.03 KB)

| Download

2.jpg (18.91 KB)

| Download

0 0

replied on February 22, 2019

Hi Laura,

Apologies--it was the end of the day when I replied and I didn't think to remove added rows and re-add the correct number when the number value changes. Just tested the following confirmed desired behavior. Just ensure that you assign the 'table' class to the relevant table.

(function() {
  $(document).ready(function() {    
    $('a#q4').hide();
    
    $('.number input').change(function() {
      var number = $('.number input').val();
      
      $('.table tr').each(function() {
        $(this).find('td.action a').click();
      });
      
      for (i = 0; i < number; i++) {
        $('a#q4').click();
      }
      $('a#q4').hide();
    });
  });
})();

Best,

Rob

1 0

replied on February 21, 2019

Here is my function for setting a collection size. It ensures the collection is always the size you request, and never increasing in size with each call.

//Example
SetCollectionSize('myCol',10);

//Set Collection Sizes
function SetCollectionSize(tableClass, size) {


    //determine if rows need to be added or subtracted from current count
    var colToModify = tableClass
    var count = $('.' + colToModify + ' .propCount').val();

    var num = size;


    //add rows
    if (count < num) {
        for (var i = count; i < num; i++) {
            $('.' + colToModify).find(".cf-collection-append").trigger('click');

        }
    }

    //remove rows
    else if (num < count) {
        for (var i = count; i > num; i--) {
            $('.' + colToModify).find(".cf-collection-delete:last").trigger('click');
        }
    }


}

0 0

You are not allowed to follow up in this post.

Question

Question

Append rows to the rows populated by a data source or variable

Replies

Sign in to reply to this post.