Inject Javascript during run-time in HTML5 forms

[tarekahf]

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?

Debug Javascript from XFA HTML5-4.jpg ‏51 KB

Debug Javascript from XFA HTML5-3.jpg ‏162 KB

Debug Javascript from XFA HTML5-2.jpg ‏167 KB

[sudhanshu_singh · Accepted solution]

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