If there a function available to detect when say a new conditional select element or input has been added to a form? I am using the functions found here to strip all styles from the form but these dont apply to conditional elements added later. I also have some javascript on the form to add a class to the mktoFieldWrap of each element so i can target the labels by say label for checkbox vs label for input. These classes get added when form is ready, but not to the conditional conset checkboxes that appear after selecting values from select elements.
Another option would be to not use the <div class="mktoPlaceholder mktoPlaceholderconsenttoProcessing"></div> and instead just have the elements already inserted into the form, but I couldnt find any options for this?
Thank you in advance for any help!
<form id="mktoForm_4312" class="dk-nobg-btm-2col center-form"></form>
<script>
MktoForms2.loadForm("//app-ab09.marketo.com", "291-IVM-952", 4312, function(form){
let formEl = form.getFormElem()[0];
let formElements = formEl.elements;
for (i=0; i<formElements.length; i++){
// Add the type of the input to the wrapper class
// so it can be targeted with css
let parentElem = getClosest(formElements[i], '.mktoFieldWrap');
if (parentElem != null) {
parentElem.classList.add("type-" + formElements[i].type);
}
}
let arrayFrom = Function.prototype.call.bind(Array.prototype.slice);
// remove element styles from <form> and children
var styledEls = arrayFrom(formEl.querySelectorAll("[style]")).concat(formEl);
styledEls.forEach(function (el) {
el.removeAttribute("style");
});
var styleSheets = arrayFrom(document.styleSheets);
styleSheets.forEach(function (ss) {
if ([mktoForms2BaseStyle, mktoForms2ThemeStyle].indexOf(ss.ownerNode) != -1 ||
formEl.contains(ss.ownerNode)
) {
ss.disabled = true;
}
});
formEl.setAttribute("data-styles-ready", "true");
});
function getClosest(elem, selector) {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Get the closest matching element
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if ( elem.matches( selector ) ) return elem;
}
return null;
}
</script>
... View more