Question

If Statement and Maintain CSS on Repository Save

Forms Classic Form Designer

Updated June 19, 2023

asked on June 16, 2023 • Show version history

I have a process where I need to retain CSS styles on table rows when saved to the repository.

I have the following function. I have confirmed the values are being recorded in the "selectedValue" variable but this always results in the value being == "".

What is wrong with the below?

$('.status_copy [type="text"]').each(function(){  
      
  var selectedValue = $(this).val(); 
  console.log(selectedValue);
  
  if (selectedValue == "On-Time" || selectedValue == "Complete") { 
      $(this).closest(".cf-table-block tr").css({
        'border-right': '8px solid #336600',
        'border-left': '8px solid #336600',
        'border-top': '1px solid #336600',
        'border-bottom': '1px solid #336600',
        'background-color': '#fff',
        'margin-bottom': '10px'
      });
  } else if (selectedValue == "Delay") {
      $(this).closest(".cf-table-block tr").css({
        'border-right': '8px solid #f7dd07',
        'border-left': '8px solid #f7dd07',
        'border-top': '1px solid #f7dd07',
        'border-bottom': '1px solid #f7dd07',
        'background-color': '#fff',
        'margin-bottom': '10px'
      });
  } else if (selectedValue == "Cancelled" || selectedValue == "Vessel" || selectedValue == "Missed") {
      $(this).closest(".cf-table-block tr").css({
        'border-right': '8px solid #e8690e',
        'border-left': '8px solid #e8690e',
        'border-top': '1px solid #e8690e',
        'border-bottom': '1px solid #e8690e',
        'background-color': '#fff',
        'padding-bottom': '10px'
      });  
  } else if (selectedValue == "") {
      $(this).closest(".cf-table-block tr").css({
        'border-right': '8px solid #000',
        'border-left': '8px solid #000',
        'border-top': '1px solid #000',
        'border-bottom': '1px solid #000',
        'background-color': '#fff',
        'margin-bottom': '10px'
      });
  }
});

0 0

Answer

SELECTED ANSWER

replied on June 16, 2023

The problem here is that the structure of the form is different in the read-only or "Archival" version of the form than it is in the active version.

Your script is looking for the li element with class status_copy, and the input element that is a decedent of it that has type="text". See this screenshot from the brower's inspect element view:

Here's that same field on the read-only version of the form:

You can see that we still have an li element with class of status_copy, but what was an input element with type="text", is now a div element with type="text".

Line 1 of your script will still work, because it's still finding .status_copy [type="text"] to loop through.

The issue becomes line 3 when you get the val() from the field: var selectedValue = $(this).val();

Where the input element would return the value from the val() function, the div element does not have anything to return.

You could try inserting something like this after line 3:

  var alternateValue = $(this).text();
  if (selectedValue == '' && alternateValue != '') {
    selectedValue = alternateValue;
  }

This gets a second value from text() instead of val() and then keeps the second value as the selectedValue if it is not empty and the original value was.

I hope this helps.

1 0

Replies

replied on June 19, 2023

Perfect!!!! Thank you for the detailed response, Matthew. Very much appreciated.

1 0

You are not allowed to follow up in this post.

Question

Question

If Statement and Maintain CSS on Repository Save

Answer

Replies

Sign in to reply to this post.