Stop forms javascript from executing in the browser at inappropriate times

posted on February 9, 2021

Javascript is added to forms to assist in replacing features that do not exist natively in the product, while the form is being filled out. However, anytime I add javascript to a form, if the person is viewing a historical submission, when they open the submission it executes the javascript that was part of the form.

This is causing a host of problems, because the javascript was designed to work with fields on the form, but they are only looking at an image of the form, the fields are gone.

So any line of code that says something like $('.myField select').val() is going to return null and the script is going to fail causing adverse side effects where part of your code successfully runs and the other part does not.

There is no reason to run javascript here, since they are only looking at what was submitted and do not need to be making any changes to the data.

If we re-assign the form, then it makes sense for javascript to run again, because they have loaded the form up again for editing purposes and the script will be able to access the fields it expects to find on the form.

0 0

replied on February 9, 2021 • Show version history

When I have a situation like this, I handle it by wrapping all of my Javascript within an if statement that checks for a field value - maybe on a field hidden by CSS. If the expected value is there, it can run all of the Javascript contained within. If the expected value is not there (such as on the read-only/archived version of the form), then nothing within the if statement is run.

Example: add a single line field with a default value of "Form is Live", and CSS Class Name of: liveFormTest

CSS:

.liveFormTest {display: none!important;}

Javascript:

$(document).ready(function () {
  
  if ($('.liveFormTest input').val() == 'Form is Live') { 
    //Enter all code here that needs to run on active version of form
    //Field values are referenced like this:   $('.className input').val()
  }
  else
  {
    //Enter all code here that needs to run on read-only and archival version of form
    //Field values are referenced like this:   $('.className .cf-field').text()
  }
  
});

There are definitely times when I want the Javascript to run, even on the readonly/archival version of the form - so I'd much rather have control like this, than have the system not run the Javascript at all on the readonly/archival version of the form.

1 0

replied on February 9, 2021

Ah I see. I had been trying if(!$('.field input').val()){return;} but it seemed even undefined was passing the ! test. I had just recently switched to ( != "") on a blank field.

It just seems odd to me to want to change anything with a historical view of submission. If you write code to change it, then it is not a true historical view of what they submitted.

1 0

replied on February 10, 2021

Just depends on what your Javascript is trying to do.

If it is all entirely based on values entered by users and direct interaction with the user, then yes, it doesn't make sense to continue the processing of the code while readonly/archived.

But I think as much as 30%-40% of my code is stuff that I still would want to run on the readonly/archived version.

Examples:

I have Javascript that allows our users to utilize Wacom signature pads - the code is not only needed to actually get the signature (active form only) but convert the saved data to an image (needed on both active form and readonly/archived form).
I have a process that uses data loaded from a database and stored in a hidden field to rearrange and rename labels on a series of checkbox and radio button fields - the process is nearly identical in all cases, but the options that can be selected are each different - it allows me to reuse the same form and same fields for over 150 different use cases - data stored in the database is just A, B, C, D, etc. - but the visual form shown to the user and archived to the repository shows the modified labels unique to each use case - so that Javascript is needed on both the active form and the readonly/archived form.
I have some forms that do visualizations like charts and graphs that are generated on the fly using Javascript.
etc.

0 0

Discussion

Discussion

Stop forms javascript from executing in the browser at inappropriate times

Comments 3

Follow-Ups 0

Sign in to reply to this post.