CODEWITHSUNDEEP
javascriptwebformsonclickmagnoliamarketo
Ankit Patel
Ankit Patel

Reputation: 15

How to get form values from the form loaded via JSP?

I am trying to get the values from the form loaded via Java Servlet using form background submission. 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.)

How it loads the form

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>

Error: 

  Cannot read property 'querySelector' of null at this line:

customFormButton = customForm.querySelector("input[type='button']");

Upvotes: 0

Views: 613

Answers (1)

Jan
Jan

Reputation: 4369

Means that previous line of your code customForm = document.querySelector("#commandDEsk2_form") didn't actually load the form and returned null. It should have nothing to do w/ the fact that you are generating html from Java.
When do you actually execute your javascript? On submission of the form or directly on load? Might be that other code that you are loading is affecting form id at runtime thus making it no visible. Try to double check execution flow on the page itself and make sure form is loaded and has the name you expect before executing script that searches for it.

Upvotes: 0

Related Questions