Hi Guys, I am trying to get the values from the form loaded via Java Servlet using form background submission. For that, I am using form background submission, but it shows the error as below: Cannot read property 'querySelector' of null at this line: customFormButton = customForm.querySelector("input[type='button']"); I have tried the code below and its working fine with the form loaded without Java Servlet. I think it's because the script is not able to find this element? I don't know much about java but I think the issue is only with the form loaded from Java. (Please correct me if I am wrong.) The code I am using is here: MktoForms2.loadForm("//app-lon1x.marketo.com", "455-xxx-5xx", 1xxx); document.addEventListener("DOMContentLoaded", function(event) { var customForm = document.querySelector("#commandDEsk2_form"), customFormButton = customForm.querySelector("input[type='button']"); if (customFormButton!= null) { customFormButton.addEventListener("click",function(customFormSubmitEvent){ customFormSubmitEvent.preventDefault(); customFormButton.disabled = true; MktoForms2.whenReady(function(mktoForm) { mktoForm.addHiddenFields({ "Salutation": customForm.querySelector("#mwf8322014b47ad_Frau:checked").value, "FirstName": customForm.querySelector("#mwfca1d8fb14840").value, "LastName": customForm.querySelector("#mwf2e0f8bf4c5a5").value, "DateofBirth": customForm.querySelector("#mwfb367fa18f4b6").value, "Email": customForm.querySelector("#mwf3723fced2f65").value, "contactPreference": customForm.querySelector("#mwf3a560d8fb35e_E-Mail:checked").value, "contactPreference": customForm.querySelector("#mwf3a560d8fb35e_Anrufen:checked").value, "contactPreferredTime": customForm.querySelector("#mwfe5cfddec289c").value, "Phone": customForm.querySelector("#mwf49493b78f207").value, "askedQuestion": customForm.querySelector("#mwf31f8c09fd40e").value, "datenverarbeitung": customForm.querySelector("#mwfff89d0f5aae6_ja").value, "productUpdate": customForm.querySelector("#mwf30b1f1052d95_ja").value, }); mktoForm.submit(); }); }); } }); And once the form loaded via servlet it has the code like this: < form id = " commandDEsk2_form " class = " webtrekkHelper_configs eineSeite " data-mwf-target = " /formulare/servlet/form?_uid = DEsk2_form&lang = de_DE&_view = webform " data-mwf-id = " DEsk2_form " action = " /formulare/servlet/form " method = " post " enctype = " multipart/form-data " accept-charset = " utf-8 " onsubmit = " return false; " > < input type = " hidden " name = " audience " value = " UIP " > < input type = " hidden " name = " revisionNr " value = " 95343 " > < input type = " hidden " name = " formRevisionNr " value = " 89693 " > < input type = " hidden " name = " wt_form " value = " 1 " > < input type = " hidden " name = " _mwfToken:DEsk2_form " value = " F3AC464C654993C3DB150955AA20B696 " > < div id = " form-top " > </ div > < ul id = " crumbs " > < li class = " selected " > < a href = " # " style =" height : 0px ; padding-right : 0px ; " > < div > < span > </ span > </ div > </ a > </ li > < li class = " last-child " > < a href = " # " style =" height : 0px ; padding-right : 0px ; " > < div > < span > Bestätigung_Sparplankampagne_Beratung </ span > </ div > </ a > </ li > </ ul > < div class = " innerForm " > < ul class = " " > < div class = " " > < input id = " datum " name = " datum " data-mwf-id = " mwff96002cfae98 " type = " hidden " value = " 23/10/19 " > </ div > < div class = " " > < input id = " zeit " name = " zeit " data-mwf-id = " mwf1ade44d34a1b " type = " hidden " value = " 10:03 " > </ div > < div class = " " > < input id = " timestamp " name = " timestamp " data-mwf-id = " mwf7ddb86ea538d " type = " hidden " value = " 23.10.19 10:03 " > </ div > < div class = " notempty " mandatory_errormessage = " Bitte wählen Sie Ihre Anrede aus. " > < li data-mwf-container = " mwf8322014b47ad " class = " mwf-field eineZeile " > < label class = " mwf-label " > Anrede < span class = " mwf-required " > * </ span > </ label > < div class = " mwf-input " > < fieldset data-mwf-fieldset = " mwf8322014b47ad " > < span class = " mwf-option " > < input id = " mwf8322014b47ad_Frau " name = " anrede " class = " mwf-radio " data-mwf-id = " mwf8322014b47ad " type = " radio " value = " Frau " > < label for = " mwf8322014b47ad_Frau " > Frau </ label > </ span > < span class = " mwf-option " > < input id = " mwf8322014b47ad_Herr " name = " anrede " class = " mwf-radio " data-mwf-id = " mwf8322014b47ad " type = " radio " value = " Herr " > < label for = " mwf8322014b47ad_Herr " > Herr </ label > </ span > < span class = " mwf-option " > < input id = " mwf8322014b47ad_Divers " name = " anrede " class = " mwf-radio " data-mwf-id = " mwf8322014b47ad " type = " radio " value = " Divers " > < label for = " mwf8322014b47ad_Divers " > Divers </ label > </ span > </ fieldset > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " notempty none " mandatory_errormessage = " Bitte geben Sie Ihren Vornamen an. " > < li data-mwf-container = " mwfca1d8fb14840 " class = " mwf-field h-odd " > < label class = " mwf-label " for = " mwfca1d8fb14840 " > Vorname < span class = " mwf-required " > * </ span > </ label > < div class = " mwf-input " > < input id = " mwfca1d8fb14840 " name = " vorname " class = " mwf-text mwf-error " placeholder = " Vorname * " data-mwf-id = " mwfca1d8fb14840 " type = " text " value = " " > < p class = " mwf-error " > Bitte geben Sie Ihren Vornamen an. </ p > </ div > </ li > </ div > < div class = " notempty none " mandatory_errormessage = " Bitte geben Sie Ihren Nachnamen an. " > < li data-mwf-container = " mwf2e0f8bf4c5a5 " class = " mwf-field h-even " > < label class = " mwf-label " for = " mwf2e0f8bf4c5a5 " > Nachname < span class = " mwf-required " > * </ span > </ label > < div class = " mwf-input " > < input id = " mwf2e0f8bf4c5a5 " name = " nachname " class = " mwf-text " placeholder = " Nachname * " data-mwf-id = " mwf2e0f8bf4c5a5 " type = " text " value = " " > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " date notempty " errormessage = " Bitte geben Sie Ihr Geburtsdatum ein (TT.MM.JJJJ) " pattern = " dd.MM.yyyy " only_past_dates = " true " mandatory_errormessage = " Bitte geben Sie Ihr Geburtsdatum an " > < li data-mwf-container = " mwfb367fa18f4b6 " class = " mwf-field h-odd " > < label class = " mwf-label " for = " mwfb367fa18f4b6 " > Geburtsdatum (tt.mm.jjjj) < em > < span class = " mwf-required " > </ span > </ em > </ label > < div class = " mwf-input " > < input id = " mwfb367fa18f4b6 " name = " geburtsdatum " class = " mwf-text " placeholder = " Geburtsdatum (tt.mm.jjjj) * " data-mwf-id = " mwfb367fa18f4b6 " type = " text " value = " " > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " notempty email " mandatory_errormessage = " Bitte geben Sie eine gültige E-Mail-Adresse ein. " errormessage = " Bitte geben Sie eine gültige E-Mail-Adresse ein. " > < li data-mwf-container = " mwf3723fced2f65 " class = " mwf-field h-even " > < label class = " mwf-label " for = " mwf3723fced2f65 " > E-Mail-Adresse < span class = " mwf-required " > * </ span > </ label > < div class = " mwf-input " > < input id = " mwf3723fced2f65 " name = " email " class = " mwf-text " placeholder = " E-Mail-Adresse * " data-mwf-id = " mwf3723fced2f65 " type = " text " value = " " > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " equal notempty " errormessage = " Ihre E-Mail-Adresse ist nicht identisch " input2 = " email " mandatory_errormessage = " Bitte geben Sie Ihre E-Mail-Adresse erneut ein. " > < li data-mwf-container = " mwfc08dbba05d86 " class = " mwf-field h-odd " > < label class = " mwf-label " for = " mwfc08dbba05d86 " > E-Mail-Adresse wiederholen < span class = " mwf-required " > * </ span > </ label > < div class = " mwf-input " > < input id = " mwfc08dbba05d86 " name = " email2 " class = " mwf-text " placeholder = " E-Mail-Adresse wiederholen * " data-mwf-id = " mwfc08dbba05d86 " type = " text " value = " " > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " " > < li data-mwf-container = " mwf3a560d8fb35e " class = " mwf-field eineZeile " > < label class = " mwf-label " > Wie dürfen wir Sie kontaktieren? </ label > < div class = " mwf-input " > < fieldset data-mwf-fieldset = " mwf3a560d8fb35e " > < span class = " mwf-option " > < input id = " mwf3a560d8fb35e_E-Mail " name = " kontaktart " class = " mwf-radio " data-mwf-id = " mwf3a560d8fb35e " type = " radio " value = " E-Mail " checked = " checked " > < label for = " mwf3a560d8fb35e_E-Mail " > E-Mail </ label > </ span > < span class = " mwf-option " > < input id = " mwf3a560d8fb35e_Anrufen " name = " kontaktart " class = " mwf-radio " data-mwf-id = " mwf3a560d8fb35e " type = " radio " value = " Anrufen " > < label for = " mwf3a560d8fb35e_Anrufen " > Anrufen </ label > </ span > </ fieldset > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " " > < li data-mwf-container = " mwfe5cfddec289c " class = " mwf-field h-odd " disabled = " disabled " style =" display : none ; " > < label class = " mwf-label " for = " mwfe5cfddec289c " > Wann dürfen wir Sie kontaktieren? </ label > < div class = " mwf-input " > < select id = " mwfe5cfddec289c " name = " kontaktzeitraum " class = " mwf-select mwf-multiple " data-mwf-id = " mwfe5cfddec289c " > < option id = " mwf7677d93c8783_DEsk2_form " value = " Ganztags " > Ganztags </ option > < option id = " mwf3e39c54f4913_DEsk2_form " value = " Vormittags " > Vormittags (bis 12 Uhr) </ option > < option id = " mwff27b5942e122_DEsk2_form " value = " Mittags " > Mittags (12 Uhr - 15 Uhr) </ option > < option id = " mwf4195bbbe92dd_DEsk2_form " value = " Nachmittags " > Nachmittags (ab 15 Uhr) </ option > </ select > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " none " > < li data-mwf-container = " mwf49493b78f207 " class = " mwf-field h-even " disabled = " disabled " style =" display : none ; " > < label class = " mwf-label " for = " mwf49493b78f207 " > Telefonnummer </ label > < div class = " mwf-input " > < input id = " mwf49493b78f207 " name = " telefon " class = " mwf-text " placeholder = " Telefonnummer * " data-mwf-id = " mwf49493b78f207 " type = " text " value = " " > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " " > < li data-mwf-container = " mwf31f8c09fd40e " class = " mwf-field " > < label class = " mwf-label " for = " mwf31f8c09fd40e " > Fragen, Anmerkungen, Kommentare (optional) </ label > < div class = " mwf-input " > < textarea id = " mwf31f8c09fd40e " name = " fragen " class = " mwf-text " spellcheck = " true " placeholder = " Fragen, Anmerkungen, Kommentare (optional) " data-mwf-id = " mwf31f8c09fd40e " > </ textarea > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " notempty " mandatory_errormessage = " Bitte stimmen Sie der Speicherung & Verarbeitung personenbezogender Daten zu. " > < li data-mwf-container = " mwfff89d0f5aae6 " class = " mwf-field ohneLabel " > < div class = " mwf-input emptyLabel " > < fieldset data-mwf-fieldset = " mwfff89d0f5aae6 " > < span class = " mwf-option " > < input id = " mwfff89d0f5aae6_ja " name = " speichern " class = " mwf-checkbox " data-mwf-id = " mwfff89d0f5aae6 " type = " checkbox " value = " ja " > < input type = " hidden " name = " _speichern " value = " on " > < label for = " mwfff89d0f5aae6_ja " > Ich bin damit einverstanden, dass Union Investment meine personenbezogenen Daten speichert und verarbeitet. * </ label > < div class = " clearfix " > </ div > </ span > </ fieldset > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " " > < li data-mwf-container = " mwf30b1f1052d95 " class = " mwf-field ohneLabel " > < div class = " mwf-input emptyLabel " > < fieldset data-mwf-fieldset = " mwf30b1f1052d95 " > < span class = " mwf-option " > < input id = " mwf30b1f1052d95_ja " name = " werbung " class = " mwf-checkbox " data-mwf-id = " mwf30b1f1052d95 " type = " checkbox " value = " ja " > < input type = " hidden " name = " _werbung " value = " on " > < label for = " mwf30b1f1052d95_ja " > Ja, ich möchte in Zukunft über Produktneuigkeiten informiert werden. (optional) </ label > < div class = " clearfix " > </ div > </ span > </ fieldset > < p class = " mwf-error " > </ p > </ div > </ li > </ div > < div class = " " > < li data-mwf-container = " mwf3db8887e70ea " class = " mwf-field mwf-bold mwf-italic h-even " > Hier können Sie die < a href = " https://www.union-investment.de/startseite/ihre-ziele/regelmaessig-geld-sparen/sparplaene/datenschutz-kontaktanfrage " target = " blank " > Datenschutzbestimmungen </ a > einsehen. </ li > </ div > < div class = " " > < li data-mwf-container = " mwfe4eed489ac10 " class = " mwf-field mwf-bold mwf-italic h-odd " > * Pflichtfelder bitte ausfüllen. </ li > </ div > < div class = " " > < input id = " hash " name = " hash " data-mwf-id = " mwf91bbb8a54285 " type = " hidden " value = " d41d8cd98f00b204e9800998ecf8427e " > </ div > < div class = " " > < input id = " bestand " name = " bestand " data-mwf-id = " mwf5ee28b44a168 " type = " hidden " value = " true " > </ div > < div class = " " > < input id = " sparziel " name = " sparziel " data-mwf-id = " mwfce8159842855 " type = " hidden " value = " Hochzeit " > </ div > < div class = " " > < input id = " calSparzielHead " name = " calSparzielHead " data-mwf-id = " mwf647da92fe719 " type = " hidden " value = " Sparziel: " > </ div > < div class = " " > < input id = " calSparziel " name = " calSparziel " data-mwf-id = " mwfcbe71c826c26 " type = " hidden " value = " Hochzeit " > </ div > < div class = " " > < input id = " betrag " name = " betrag " data-mwf-id = " mwff1ea92cfdf3b " type = " hidden " value = " 66 " > </ div > < div class = " " > < input id = " calBetragHead " name = " calBetragHead " data-mwf-id = " mwfaf473965fc8f " type = " hidden " value = " Monatliche Sparrate: " > </ div > < div class = " " > < input id = " calBetrag " name = " calBetrag " data-mwf-id = " mwf2e44a3360955 " type = " hidden " value = " 66,00 EUR " > </ div > < div class = " " > < input id = " zeitraum " name = " zeitraum " data-mwf-id = " mwf12bb6ad557ad " type = " hidden " value = " 66 " > </ div > < div class = " " > < input id = " calZeitraum " name = " calZeitraum " data-mwf-id = " mwf0425ef2e185e " type = " hidden " value = " 66 Jahre " > </ div > < div class = " " > < input id = " rendite " name = " rendite " data-mwf-id = " mwf8190427207a2 " type = " hidden " value = " 55602 " > </ div > < div class = " " > < input id = " calRendite " name = " calRendite " data-mwf-id = " mwf04eff012fc8c " type = " hidden " value = " 55602,00 EUR " > </ div > < div class = " " > < input id = " sparsumme " name = " sparsumme " data-mwf-id = " mwfe2217cc0ee7a " type = " hidden " value = " 107874 " > </ div > < div class = " " > < input id = " calSparsummeHead " name = " calSparsummeHead " data-mwf-id = " mwf3b427453f565 " type = " hidden " value = " Sparsummme: " > </ div > < div class = " " > < input id = " calSparsumme " name = " calSparsumme " data-mwf-id = " mwf402cbf86d882 " type = " hidden " value = " 107874,00 EUR " > </ div > < div class = " " > < input id = " bank " name = " bank " data-mwf-id = " mwfbb29532caae2 " type = " hidden " value = " Volksbank Raiffeisenbank Dachau eG Geschäftsstelle Karlsfeld, Münchner Str. " > </ div > < div class = " " > < input id = " calAnrede " name = " calAnrede " data-mwf-id = " mwfa0838e6ecd1c " type = " hidden " value = " " > </ div > < div class = " " > < input id = " calAbschluss " name = " calAbschluss " data-mwf-id = " mwf9691723079d1 " type = " hidden " value = " " > </ div > < div class = " " > < input id = " kontaktTelefon " name = " kontaktTelefon " data-mwf-id = " mwfdc35502376e6 " type = " hidden " value = " " > </ div > < div class = " " > < input id = " calFragenHead " name = " calFragenHead " data-mwf-id = " mwf5f73a037f614 " type = " hidden " value = " " > </ div > < div class = " " > < input id = " calFragen " name = " calFragen " data-mwf-id = " mwf9790643eff2d " type = " hidden " value = " " > </ div > < div class = " " > < input id = " userAgent " name = " userAgent " data-mwf-id = " mwf9baf2e11a2ed " type = " hidden " value = " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36 " > </ div > < div class = " " > < input id = " calxHeader " name = " calxHeader " data-mwf-id = " mwfb63d6fd8a121 " type = " hidden " value = " 4_1_Interessenten_Kampagne " > </ div > < div class = " " > < input id = " calWerbung " name = " calWerbung " data-mwf-id = " mwf3d659e394d24 " type = " hidden " value = " " > </ div > </ ul > < ul > < li data-mwf-container = " _finish_mwf9ee817e83aae " class = " mwf-button mwf-next " > < input type = " button " value = " Submit " data-mwf-submit = " {"type":"finish"} " class = " webtrekkHelper_observe " data-webtrekk-formsubmit = " " data-webtrekk-linkid-area = " Content " data-webtrekk-linkid-element = " Button " data-webtrekk-linkid-name = " Submit " data-webtrekk-linkid-target-append-base-contentid = " .Bestätigung_Sparplankampagne_Beratung " > </ li > </ ul > < ul > < li class = " mwf-pager " > < p > < span > 1 </ span > / < span > 2 </ span > </ p > </ li > </ ul > </ div > </ form > Any help would be appreciated. Thank you. Sanford Whiteman
... View more