How to get the values from the form rendered via Java Servlet?

[Ankit_Patel1]

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&amp;lang=de_DE&amp;_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 &amp; 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="{&quot;type&quot;:&quot;finish&quot;}" 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‌ 

[Amit_Jain]

Hi Ankit,

I guess the issue is with following lines:

 var customForm = document.querySelector("#commandDEsk2_form"),
customFormButton = customForm.querySelector("input[type='button']");

can you try instead:

 var customForm,customFormButton ;
customForm= document.querySelector("#commandDEsk2_form");
customFormButton = customForm.querySelector("input[type='button']");

Let me know if this works.

[Ankit_Patel1]

Hi Amit,

I have tried that too. Not working. But do you think it has something to do with position of the script? But I have also used

.addEventListener("DOMContentLoaded"). Not sure.

Thanks!

[SanfordWhiteman]

Those lines of JavaScript have exactly the same meaning, Amit.

[SanfordWhiteman]

If the <form> element with id="commandDEsk2_form" is not rendered synchronously (as part of the initial DOM) then waiting for DOMContentLoaded cannot work.

If that <form> is injected asynchronously into the page (i.e. a script injects the form markup) then you have to use that script's event model to capture when it's ready. This is exactly the same as with Marketo forms, which offer the custom whenReady event because you can't rely on default browser events.

If you provide a link to your page I might be able to see if there's an event being fired.