如何从通过 JSP 加载的表单中获取表单值？

Posted 2023-02-16

技术标签:

【中文标题】如何从通过 JSP 加载的表单中获取表单值？【英文标题】：How to get form values from the form loaded via JSP? 【发布时间】：2019-10-23 08:46:17 【问题描述】：

我正在尝试使用表单后台提交从通过 Java Servlet 加载的表单中获取值。我已经尝试了下面的代码，并且在没有 Java Servlet 的情况下加载的表单可以正常工作。我认为这是因为脚本无法找到该元素？

我对 java 了解不多，但我认为问题仅在于从 Java 加载的表单。（如果我错了，请纠正我。）

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


);

一旦通过 servlet 加载表单，它的代码如下：

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

意味着您的代码customForm = document.querySelector("#commandDEsk2_form") 的前一行实际上并未加载表单并返回null。它应该与您从 Java 生成 html 的事实无关。你什么时候真正执行你的javascript？提交表单还是直接加载？可能是您正在加载的其他代码在运行时影响表单 ID，从而使其不可见。在执行搜索它的脚本之前，请尝试仔细检查页面本身的执行流程，并确保表单已加载并具有您期望的名称。

【讨论】：

以上是关于如何从通过 JSP 加载的表单中获取表单值？的主要内容，如果未能解决你的问题，请参考以下文章

各位大侠，在servlet中如何将数据传递到form表单的组件中。就是从表单获取值的反向操作

请问下：如果在jsp 中获取一组 radio 的checked值

jsp name属性相同的多个input-text表单如何获取值？高分！在线急等，半小时给最佳答案

如何从颤动的表单中获取值？

提交表单后防止重新加载页面。（没有阿贾克斯）

如何从Spring表单传递参数到@RequestParam？