Question

Combine Columns Per Row from a Table

Forms

Updated April 4, 2018

asked on March 27, 2018

I have a table that may or may not get populated:

If it does get populated, I need to take three columns of each row and merge into one field (with dashes in between). The final output should look like this:

B01-NUH003.11310.09-0; DES-1055.K-1686-0; QC-QAC-1-12

I've tried numerous things that don't get me the desired output. Any suggestions on the approach I could take to merge three columns of a table, one row at a time?

0 0

Answer

SELECTED ANSWER

replied on April 2, 2018 • Show version history

Hi Gloria,

It looks like you need to update the css class for the table in the script. try this.

$(document).ready(function(){
//Sets function to call upon later
  function populateTextArea(ind){
    var str = '';
// css class of the Table is affectedDocs
  $('.affectedDocs.cf-table-block tr').each(function(ind){
    if (str != '') str = str+'; ';
    if (ind != 0) str = str+$(this).find('.docID input').val()+'-'+$(this).find('.docNo input').val()+'-'+$(this).find('.revision input').val();
    });
  $('.output textarea').val(str);
  }
// q7 is the Table Id
  $('#q7').on('change blur', populateTextArea);
  $('#q7').on('click blur', populateTextArea);

//The code below will wait 1 second before triggering the text population. Useful if Table rows are being populated from database.
//setTimeout(function(){
//populateTextArea(); //Call function
//},1000); //End setTimeout

});  //close document.ready

I have also added in a setTimeout function. if your table is being populated initially from a DB lookup, this will wait 1 second and then populate the text area for you.

1 0

Replies

replied on March 27, 2018

Hi Gloria, will your table only be 3 fields tall, I'm asking as I see the "Add Another Affected Doc" option below the table and wondering how that plays into your problem.

0 0

replied on March 30, 2018

Not sure if it does play into it all.

0 0

replied on March 27, 2018

Hi Gloria,

Will this post help you at all? It has some JavaScript that is picking up from a table and inserting into a multi value field with dashes in the output. Let me know if you don't understand it or want more clarification at all and I'll do my best to explain it further.

https://answers.laserfiche.com/questions/128379/Emailing-Table-Field-Values-from-Forms

0 0

replied on March 30, 2018

Thank you. I tried this:

$(document).ready(function(){
//Sets function to call upon later
  function populateTextArea(ind){
    var str = '';
// css class of the Table is table
  $('.table.cf-table-block tr').each(function(ind){
    if (str != '') str = str+'\n';
    if (ind != 0) str = str+$(this).find('.docID input').val()+' - '+$(this).find('.docNo input').val()+' - '+$(this).find('.revision input').val();
    });
  $('.output textarea').val(str);
  }
// q7 is the Table Id
  $('#q7').on('change blur', populateTextArea);
  $('#q7').on('click blur', populateTextArea);
});  //close document.ready

This is what I'm trying to get (minus what's in parenthesis):

but it's not working. Doesn't fill anything in. Have I done something wrong?

0 0

SELECTED ANSWER

replied on April 2, 2018 • Show version history

Hi Gloria,

It looks like you need to update the css class for the table in the script. try this.

$(document).ready(function(){
//Sets function to call upon later
  function populateTextArea(ind){
    var str = '';
// css class of the Table is affectedDocs
  $('.affectedDocs.cf-table-block tr').each(function(ind){
    if (str != '') str = str+'; ';
    if (ind != 0) str = str+$(this).find('.docID input').val()+'-'+$(this).find('.docNo input').val()+'-'+$(this).find('.revision input').val();
    });
  $('.output textarea').val(str);
  }
// q7 is the Table Id
  $('#q7').on('change blur', populateTextArea);
  $('#q7').on('click blur', populateTextArea);

//The code below will wait 1 second before triggering the text population. Useful if Table rows are being populated from database.
//setTimeout(function(){
//populateTextArea(); //Call function
//},1000); //End setTimeout

});  //close document.ready

I have also added in a setTimeout function. if your table is being populated initially from a DB lookup, this will wait 1 second and then populate the text area for you.

1 0

replied on April 3, 2018

Thanks, Aaron, for taking the time to get this working EXACTLY as I need it to!

0 0

replied on April 3, 2018

One last question ... I actually have two tables (.affectedDocs and .newDocs) dumping results into one output field, so my javascript now looks like this:

$(document).ready(function(){

//Sets function to call upon later
  function populateTextArea(ind){
    var str = '';
// css class of the Table is affectedDocs
  $('.affectedDocs.cf-table-block tr, .newDocs.cf-table-block tr').each(function(ind){
    if (str != '') str = str+'; ';
    if (ind != 0) str = str+$(this).find('.docID input').val()+'-'+$(this).find('.docNo input').val()+'-'+$(this).find('.revision input').val();
    });
  $('.output textarea').val(str);
  }
// q7 and q85 are the Table IDs
  $('#q7, #q85').on('change blur', populateTextArea);
  $('#q7, #q85').on('click blur', populateTextArea);
//The code below will wait 1 second before triggering the text population. Useful if Table rows are being populated from database.
  setTimeout(function(){
  populateTextArea(); //Call function
  },1000); //End setTimeout

});  //close document.ready

It works great except I have an "undefined" result that I don't want:

0 0

replied on April 3, 2018 • Show version history

Hi Gloria,

I see. The second table does present a little bit of an issue. Try using the table ID numbers instead.

$(document).ready(function(){

  function populateTextArea(){
    var str = '';
//  Use the Table ID instead
  $('#q7 tbody tr, #q85 tbody tr').each(function(){
    if (str != '') str = str+'; ';
      var fieldCheck = $(this).find('.docID input').val() || ''; //If input has no value, set to blank and not run through fields.
      if (fieldCheck != ''){
     str = str+$(this).find('.docID input').val()+'-'+$(this).find('.docNo input').val()+'-'+$(this).find('.revision input').val();
      }
    });
  $('.output textarea').val(str);
  }
// q7 and q85 are the Table IDs
  $('#q7, #q85').on('change blur', populateTextArea);
  $('#q7, #q85').on('click blur', populateTextArea);
//The code below will wait 1 second before triggering the text population. Useful if Table rows are being populated from database.
  setTimeout(function(){
  populateTextArea(); //Call function
  },1000); //End setTimeout

});  //close document.ready

1 0

replied on April 4, 2018

That did it! I truly appreciate the time you took to help me!

1 0

You are not allowed to follow up in this post.

Question

Question

Combine Columns Per Row from a Table

Answer

Replies

Sign in to reply to this post.