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

Question

Question

Dynamically updating Custom HTML inline element using JavaScript in the Modern form designer.

Forms
Updated May 16
asked on May 15

Greetings,

In the Classic form designer, I was able to use JavaScript to update a span (inline container element) in a Custom HTML field to dynamically display content from a single line field.

For example in the Classic designer...

Define CSS class for a single line field that will contain the text I want to show up in the Custom HTML span element:

Custom HTML with span tag that will contain the content of the single line field:

Associated JavaScript:

$(document).on("change", ".CityEmailField", function() {
  $("#CityEmailField").text($(".CityEmailField input").val()).change();
});

This doesn’t work in the Modern form designer.  Reading the Administration Guide, there’s a note that says “In the form designer, the Custom HTML field prevents access to the window and document objects in HTML events. For example, you will be unable to use document.getElementById or window.postMessage types of JavaScript calls.”.  It does reference a post on how to safely use HTML events in the Modern form designer, but the use case in that post is not close enough to what I’m after for me to be able to cobble together JavaScript that works (despite some time spent trying... I'm by no means a JavaScript jockey).

Might anyone have the JavaScript equivalent to this that works in the Modern designer?

Thank you for your time and help.

Best regards,
Jeff

1 0

Replies

replied on May 15

The LFForm object documentation will help you here. Between onFieldChange and changeFieldSettings you will be able to accomplish what you are trying to do. 

You can use any field identifier for the field in question, check the documentation for help on that. The key difference is you will set the content of the entire HTML field in question. The below code just updates it to a simple span to illustrate the APIs

const cityEmailFieldId = 2;
LFForm.onFieldChange(async () => {
  await LFForm.changeFieldSettings({ fieldId: cityEmailFieldId }, {
    content: “<span>” + LFForm.getFieldValues({ fieldId: cityEmailFieldId }) + “</span>”
});

 

1 0
replied on May 16

Thank you much for the information, Zachary.  I'll give this a try.

 

Best regards,
Jeff

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

Sign in to reply to this post.

Details
Related Posts
Loading ...