AnsweredAssumed Answered

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

Question asked by Ankit Patel on Oct 23, 2019
Latest reply on Oct 23, 2019 by Sanford Whiteman

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 

Outcomes