Is it possible to add lines to a table by putting a number in a field?

asked on January 23, 2018 • Show version history

Hello,

Is it possible to put a number in a field, then have Forms create that many lines in a table?

I have a warehouse where the receiving clerk may check in, say, 10 iPads or Chromebooks, and needs to get the serial number and asset tag off of each.

All are the same model.

They would like to enter the number received in one field, and have that number of lines appear in the table below.

This would be preferred to clicking the "add" button "x" number of times; if there are lines left over, or if they are short, they will know right away if a mistake was made when entering the serial numbers and barcodes of the asset tags.

Thanks!

1 0

replied on January 24, 2018 • Show version history

Hi Ken,

This functionality is possible using Javascript. We can pull the input from the number field to determine how many rows we will need in the table; then, using that number, we can either add or delete rows as needed.

To use the script below, you'll want to make sure that you choose the "Range of Rows" option when specifying the number of rows in your table and set the min as 0. Then, modify the script according to the identifiers for each field on your form. In the example below, #q2 is the number field, #q6 is the table, and #q5 is the table's Add button.

$(document).ready(function() {
  
  //watch for a change on the number field
  $('#q2').on('change', function() {
    
    //determine whether fields need to be added or subtracted
    var count = $('#q6 tbody tr').length;
    var num = $('#q2 input').val();
    num = parseInt(num, 10); 
    
    //add rows
    if (count < num) {
      for (var i=count; i<num; i++) {
      	$('#q5').trigger('click');
      }
    }
    
    //remove rows
    else if (num < count) {
      for (var i=count; i>num; i--) {
        $('#q6').find(".cf-table-delete:last").trigger('click');
      }
    }
  });
});

Let me know if you have any questions!

1 0

replied on January 24, 2018

Thanks!

That worked quite well!

0 0

replied on January 25, 2018

This is awesome. I have been trying to figure out how to do this and did not know about the cf-table-delete:last option. I modified the code so that IDs are not required, just enter the class of the table you want to modify.

$(document).ready(function() {
  
  //watch for a change on the number field
  $('.numRowsInput input').on('change', function() {
    
    try{
    
    //determine whether fields need to be added or subtracted
    var tableToModify = 'tableClassName';
    var count = $('.'+tableToModify+' tbody tr').length;
    var num = $(this).val();

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

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

  }catch(err){alert(err.message)};
    
  });
});

1 0

Question

Question

Is it possible to add lines to a table by putting a number in a field?

Replies

Sign in to reply to this post.