Как получить значения формы из формы, загруженной через JSP? - PullRequest
Новая
       103

Как получить значения формы из формы, загруженной через JSP?

0 голосов
/ 23 октября 2019

Я пытаюсь получить значения из формы, загруженной через сервлет Java, используя отправку фона формы. Я попробовал приведенный ниже код, и он отлично работает с формой, загруженной без сервлета Java. Я думаю, это потому, что скрипт не может найти этот элемент?

Я не знаю много о java, но думаю, что проблема только в форме, загруженной из Java. (Пожалуйста, исправьте меня, если я ошибаюсь.)

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();
 });
 });
}

});

И как только форма загружается через сервлет, она имеет такой код: 

<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>

Ошибка: 

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

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

1 Ответ

0 голосов
/ 24 октября 2019

Означает, что предыдущая строка вашего кода customForm = document.querySelector("#commandDEsk2_form") фактически не загружала форму и вернула null. Он не должен иметь ничего общего с тем фактом, что вы генерируете html из Java.
Когда вы фактически выполняете свой javascript? На подаче формы или непосредственно на загрузку? Возможно, другой загружаемый код влияет на идентификатор формы во время выполнения, что делает его невидимым. Попробуйте дважды проверить поток выполнения на самой странице и убедиться, что форма загружена и имеет имя, которое вы ожидаете, прежде чем выполнять скрипт, который ее ищет.

...