Question

Is there a way to insert an input field into a table header?

Laserfiche How To Forms Version 10

Updated November 2, 2020

asked on October 20, 2020

I have a table that two of the columns are "other" fields, that the user then sets what those values are if they decide to enter data in that column. Currently how I have accommodated this is that under the table I have two single line fields that "show" only if data is entered into their corresponding column. However, I would like to embed those description fields into the column header. Is there a way to do this?

laserfich answers question on inputs in table header.png (45.16 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on November 2, 2020 • Show version history

I found a way to get the two input fields into their respective table headers.

This what I have for the JavaScript:

  //Find the controls
  var txtTargetOne = $('#otherInputOneNewLocation');
  var txtTargetTwo = $('#otherInputTwoNewLocation');

  //Search for DIV, INPUT or SPAN, SPAN is used for display
  var txtFieldOne = $('.otherInputOne DIV.cf-field DIV, .otherInputOne DIV.cf-field INPUT, .otherInputOne DIV.cf-field SPAN');
  var txtFieldTwo = $('.otherInputTwo DIV.cf-field DIV, .otherInputTwo DIV.cf-field INPUT, .otherInputTwo DIV.cf-field SPAN');

  
  //Remove the textbox from its current location
  txtFieldOne.remove();
  txtFieldTwo.remove();
  
  //Insert textbox after the place holder/target 
  txtFieldOne.insertAfter(txtTargetOne);
  txtFieldTwo.insertAfter(txtTargetTwo);
  
  //Remove the place holder/target 
  txtTargetOne.remove();
  txtTargetTwo.remove();
  
  //Hide the old label
  $('.otherInputOne').hide();
  $('.otherInputTwo').hide();

Then in the column labels I entered the following.

<div id="otherInputOneNewLocation">Other 1 Amount</div>(2)

<div id="otherInputTwoNewLocation">Other 2 Amount</div>(2)

'otherInputOne' and 'otherInputTwo' are the CSS Class names of the input fields being moved.

This is the answer that gave me the hints on how to get it to work : https://answers.laserfiche.com/questions/64063/Answer-Using-DIV-to-place-storeable-input-fields-into-HTML-text-blocks#82402

laserfich answers question on inputs in table header 3.png (18.69 KB)

| Download

2 0

Replies

replied on October 20, 2020 • Show version history

You could try the following:

Where "#Field1" is the id of the description input and "Field3(1)" is the id of the target column header.

$(function(){
  $('#Field1').change(function(){
    $('th > label[for="Field3(1)"]').text($(this).val());
  })
})

2 0

View 2 previous replies

replied on October 21, 2020 • Show version history

The following is my code, and it does the first alert (got here 3) but must error out on the line after that because it does not get to the second alert (got here 4). "otherInputOne" is the class name of my input field. Any ideas what I might be missing?

 $(function(){
   
  $('.otherInputOne input').change(function(){
    
    $(this).val();
    alert("got here 3");
    $('th > label[for="q92(1)"]').text(desc);
    alert("got here 4");
  })
})

laserfich answers question on inputs in table header 2.png (11.99 KB)

| Download

0 0

replied on October 21, 2020 • Show version history

Try the following:

$(function(){
  $('.otherInputOne').change(function(){
    $('th > label[for="Field92(1)"]').text($(this).val());
  });
  $('.otherInputTwo').change(function(){
    $('th > label[for="Field94(1)"]').text($(this).val());
  })
})

You dont need the # as that is only for ids. Please try the updated code above.

1 0

replied on October 21, 2020

I had to remove the '#" to get it to put the input from the field into the table label. And I think it is rather slick and may be what we end up doing. However what I was wanting to do was to make it so a user could type within the table label. My team thinks that having the fields below the table (as I have them now) would be a bit confusing to our end users.

0 0

replied on October 21, 2020

Labels are not really intended for user input, but your colleagues are probably correct and this may end up being confusing to your end users.

I might suggest instead adding a "Description" column next to each "Other Amount" it with an input for describing what the other amount is for. I think this might be less confusing.

1 0

SELECTED ANSWER

replied on November 2, 2020 • Show version history

I found a way to get the two input fields into their respective table headers.

This what I have for the JavaScript:

  //Find the controls
  var txtTargetOne = $('#otherInputOneNewLocation');
  var txtTargetTwo = $('#otherInputTwoNewLocation');

  //Search for DIV, INPUT or SPAN, SPAN is used for display
  var txtFieldOne = $('.otherInputOne DIV.cf-field DIV, .otherInputOne DIV.cf-field INPUT, .otherInputOne DIV.cf-field SPAN');
  var txtFieldTwo = $('.otherInputTwo DIV.cf-field DIV, .otherInputTwo DIV.cf-field INPUT, .otherInputTwo DIV.cf-field SPAN');

  
  //Remove the textbox from its current location
  txtFieldOne.remove();
  txtFieldTwo.remove();
  
  //Insert textbox after the place holder/target 
  txtFieldOne.insertAfter(txtTargetOne);
  txtFieldTwo.insertAfter(txtTargetTwo);
  
  //Remove the place holder/target 
  txtTargetOne.remove();
  txtTargetTwo.remove();
  
  //Hide the old label
  $('.otherInputOne').hide();
  $('.otherInputTwo').hide();

Then in the column labels I entered the following.

<div id="otherInputOneNewLocation">Other 1 Amount</div>(2)

<div id="otherInputTwoNewLocation">Other 2 Amount</div>(2)

'otherInputOne' and 'otherInputTwo' are the CSS Class names of the input fields being moved.

This is the answer that gave me the hints on how to get it to work : https://answers.laserfiche.com/questions/64063/Answer-Using-DIV-to-place-storeable-input-fields-into-HTML-text-blocks#82402

laserfich answers question on inputs in table header 3.png (18.69 KB)

| Download

2 0

You are not allowed to follow up in this post.

Question

Question

Is there a way to insert an input field into a table header?

Answer

Replies

Sign in to reply to this post.