Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Inject Javascript during run-time in HTML5 forms

Avatar

Level 8

I found out that under HTML5 forms I can write Javascript code that can access the entire document model and any code that would normally run in a browser, it would run under HTML5 element events.

For example see snapshots below below. I add this code to the click event:

debugger; txtImageStr.rawValue = imgFld.rawValue; imgFld.rawValue = null; app.alert("button id _5 = " + document.getElementById("_5").id); document.getElementsByName("_5")[0].addEventListener("click", myFunc)

And it worked properly when used the LC Forms Manager to preview the form

Question: Does this mean I can use Javascript Code Injection method to enrich the client side functionality for example, to add image controls and similar stuff?

1 Accepted Solution

Avatar

Correct answer by
Level 2

The HTML DOM structure is internal and can change with updates, so one should never work with the HTML DOM elements directly from HTML5 form. Also the changes made to the DOM would not be reflected to the model automatically. For the use case you mentioned (add image controls) you should follow the customization guide: https://helpx.adobe.com/aem-forms/6-2/custom-widgets.html

1 Reply

Avatar

Correct answer by
Level 2

The HTML DOM structure is internal and can change with updates, so one should never work with the HTML DOM elements directly from HTML5 form. Also the changes made to the DOM would not be reflected to the model automatically. For the use case you mentioned (add image controls) you should follow the customization guide: https://helpx.adobe.com/aem-forms/6-2/custom-widgets.html