Question
How to get the values from the form rendered via Java Servlet?
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:
javascriptcustomFormButton = customForm.querySelector("input[type='button']");
I have tried the code below and it's 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:
javascriptMktoForms2.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 HTML (servlet-loaded):
The form has id commandDEsk2_form and includes fields for:
Anrede (salutation) - radio buttons (Frau/Herr/Divers)
Vorname (first name) - text input
Nachname (last name) - text input
Geburtsdatum (date of birth) - date input
Email - email input
Kontaktart (contact preference) - radio buttons
Phone - text input
Questions/comments - textarea
Data processing consent - checkbox
Marketing consent - checkbox
Submit button with type="button"
The form includes various hidden fields and uses onsubmit="return false;".