Why the script is not running inside the webform (JSP)?

Level 1

Why the script is not running inside the webform (JSP)?

I am trying to submit the hidden form from the Marketo, with the form values from another form (webform) loaded via JSP.

The script is working fine when for a normal HTML form. It's not working with the JSP form. I need some help to troubleshoot the code.

<script src="//app-lonXX.marketo.com/js/forms2/js/forms2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form id="mktoForm_1052"></form>

<div class="contactForm">

<form id="JSP_form" class="webtrekkHelper_configs eineSeite" data-mwf-target="/formulare/servlet/form;webforms=E905F54C7DEDE98AAC26DA1B799E5CA3.node01?_uid=DEsk2_form&amp;lang=de_DE&amp;_view=webform" data-mwf-id="JSP_form" action="/formulare/servlet/form;webforms=E905F54C7DEDE98AAC26DA1B799E5CA3.node01" 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="96365">

<div id="form-top"></div>

...form fields

<div class="">

<!-------- I WANT TO RUN THIS SCRIPT ON SUBMIT "JSP_form" ------------>

<script>
MktoForms2.loadForm("//app-lonXX.marketo.com", "4XX-XXX-XXX", 1052);
document.addEventListener("DOMContentLoaded", function(event) {
var customForm = document.querySelector("#JSP_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 || customForm.querySelector("#mwf8322014b47ad_Herr:checked").value || customForm.querySelector("#mwf8322014b47ad_Divers:checked").value || false,
"FirstName": customForm.querySelector("#mwfca1d8fb14840").value,
"LastName": customForm.querySelector("#mwf2e0f8bf4c5a5").value

});
mktoForm.submit();
});
});
}
});
</script>


<!-----------------BUT UNFORTUNATELY IT IS NOT RUNNING (No "POST" Event on form submission)-------------------------->

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

<script type="text/javascript">
try {
jQuery('#JSP_form').webforms({
"onSubmit": function(data, textStatus, xhr) {
window.location.href = '#form-top';
return true;
}
setUpValidation();
</script>


</div>

Am I doing something wrong here or does the JSP_form (Webform) not allowing to submit?

Any help will be appreciated.

Thanks in advance!

1 REPLY 1
Level 10 - Community Moderator

Re: Why the script is not running inside the webform (JSP)?

This is obvs. not a Marketo issue but one with your JSP forms library.

You have to provide a link to your URL if you want help with this -- the source code pasted here won't make help as there are other components involved.