You are viewing limited content. For full access, please sign in.

Question

Question

Highlight Field Label or Field background on submission

asked on June 15, 2021

We are looking to highlight a field label or entire field background on submission of the form. We don't want to have the field highlighted (different background color) while the user is filling out the form, but we want to be able to quickly locate that section of the form after it gets submitted and saved into the Repository.

 

Is there Javascript that can handle this task to highlight a specific field after the user submits the form and saves the form with that highlighted color?

0 0

Answer

SELECTED ANSWER
replied on June 15, 2021 Show version history

There are multiple ways to do this...

A simple one would be to make an copy of the form that is used for archival to your repository and only include the highlighting on that version of the form.

Here's another method that doesn't include the alternate form.

For this, you add the "highlightAfter" class to any field you want highlighted after submission.

This CSS does the actual highlighting: 

.highlightAfter {background-color : yellow;}

And this Javascript removes the highlighting from the fields while the form is active:

$(document).ready(function () {
  
  //Find input fields with highlightAfter class and remove it.
  //This allows the highlighting only on the submitted form, but not the active form.
  $('.highlightAfter input').closest('.form-q').removeClass('highlightAfter');
  
  //Find select (dropdowns) fields with highlightAfter class and remove it.
  //This allows the highlighting only on the submitted form, but not the active form.
  $('.highlightAfter select').closest('.form-q').removeClass('highlightAfter');
  
  //Find textarea (multi-line) fields with highlightAfter class and remove it.
  //This allows the highlighting only on the submitted form, but not the active form.
  $('.highlightAfter textarea').closest('.form-q').removeClass('highlightAfter');
  
});

This method has a benefit over the method of using a different form for archival, that it will also work on the read-only view inside forms of submitted tasks.

Edit to add: @████████'s suggestion is more elegant than mine. wink

 

1 0
replied on June 15, 2021

The pure CSS route might be simpler, but this would work as well.

You could also simplify your code with JQuery's :input selector rather than adding a separate line for each input type.

$(document).ready(function () {
  $('.highlightAfter :input').closest('.form-q').removeClass('highlightAfter');
});

 

2 0
replied on June 15, 2021

nice!

0 0
replied on June 15, 2021

Thank you both! The CSS/Javascript worked just as I needed!

1 0
replied on June 15, 2021

@████████,

Glad to hear one of the options worked for you. smiley

Please consider marking your question as answered.  Thank you!

0 0

Replies

replied on June 15, 2021 Show version history

You could add a custom CSS class to the field and try something like this:

.cf-page-readonly .highlightField {
    background-color: yellow;
}

The .cf-page-readonly class only gets applied when the page is in a read-only state, which would apply to a few scenarios, including when you display the form on the "thank you" page after submission, when you load it as a read-only user task (as in checking the "make form read-only for users" option), and when it saves to the repository.

That's what I typically use when I want to apply styling to the saved version that is different from how I want it to look on the "live" form prior to submission.

 

Live Form

 

Post-Submission

 

Read-Only User Task

 

Saved Copy

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.