javascriptadobeaem
URL parameters not passing to form in Adobe Experience Manager
I have the following code that I am using on a platform called FormAssembly and it works flawlessly with the provided URL for the form.
However, when I post the full HTML for this code into AEM the code no longer passes the variables to the form. It still writes to the console without any issue, it just won't pass to the form.
How the form gets put on AEM is the following:
- I pull the full HTML from FormAssembly.
- The full HTML is then pasted into AEM.
Unfortunately I don't have access to AEM, but for some reason have been tasked to solve this.
<script type="text/javascript">
//Used to pull URL
const link = window.location.href;
const url = new URL(link);
//Function to get the URL parameters
function getParameterByName(name) {
return url.searchParams.get(name);
}
//Gathering the URL Parameters and writing to console to check if parse is accurate -- Note the console.log can be removed if needed
var period = getParameterByName('period');
console.log(period);
var loan = getParameterByName('loan');
console.log(loan);
var ltv = getParameterByName('ltv');
console.log(ltv);
var transaction = getParameterByName('transaction');
console.log(transaction);
var property_type = getParameterByName('property_type');
console.log(property_type);
var fico = getParameterByName('fico');
console.log(fico);
var occupancy = getParameterByName('occupancy');
console.log(occupancy);
var cashout = getParameterByName('cashout');
console.log(cashout);
var rate = getParameterByName('rate');
console.log(rate);
var fees = getParameterByName('fees');
console.log(fees);
var points = getParameterByName('points');
console.log(points);
var trackingID = getParameterByName('trackingID');
console.log(trackingID);
//On load function to prefill the forms hidden fields
window.onload = function(){
document.getElementById("tfa_49").value = period;
document.getElementById("tfa_50").value = loan;
document.getElementById("tfa_51").value = ltv;
document.getElementById("tfa_53").value = transaction;
document.getElementById("tfa_54").value = property_type;
document.getElementById("tfa_55").value = fico;
document.getElementById("tfa_56").value = occupancy;
document.getElementById("tfa_57").value = cashout;
document.getElementById("tfa_58").value = rate;
document.getElementById("tfa_59").value = fees;
document.getElementById("tfa_60").value = points;
document.getElementById("tfa_61").value = trackingID;
}
</script>Adding Form HTML:
<!-- FORM: BODY SECTION -->
<div class="wFormContainer" >
<div class="wFormHeader"></div>
<style type="text/css"></style><div class=""><div class="wForm" id="55-WRPR" dir="ltr">
<div class="codesection" id="code-55">
<script type="text/javascript">
//Used to pull URL
const link = window.location.href;
const url = new URL(link);
//Function to get the URL parameters
function getParameterByName(name) {
return url.searchParams.get(name);
}
//Gathering the URL Parameters and writing to console to check if parse is accurate -- Note the console.log can be removed if needed
var period = getParameterByName('period');
console.log(period);
var loan = getParameterByName('loan');
console.log(loan);
var ltv = getParameterByName('ltv');
console.log(ltv);
var transaction = getParameterByName('transaction');
console.log(transaction);
var property_type = getParameterByName('property_type');
console.log(property_type);
var fico = getParameterByName('fico');
console.log(fico);
var occupancy = getParameterByName('occupancy');
console.log(occupancy);
var cashout = getParameterByName('cashout');
console.log(cashout);
var rate = getParameterByName('rate');
console.log(rate);
var fees = getParameterByName('fees');
console.log(fees);
var points = getParameterByName('points');
console.log(points);
var trackingID = getParameterByName('trackingID');
console.log(trackingID);
//On load function to prefill the forms hidden fields
window.onload = function(){
document.getElementById("tfa_49").value = period;
document.getElementById("tfa_50").value = loan;
document.getElementById("tfa_51").value = ltv;
document.getElementById("tfa_53").value = transaction;
document.getElementById("tfa_54").value = property_type;
document.getElementById("tfa_55").value = fico;
document.getElementById("tfa_56").value = occupancy;
document.getElementById("tfa_57").value = cashout;
document.getElementById("tfa_58").value = rate;
document.getElementById("tfa_59").value = fees;
document.getElementById("tfa_60").value = points;
document.getElementById("tfa_61").value = trackingID;
}
</script>
</div>
<h3 class="wFormTitle" id="55-T">Mortgage Informa</h3>
<form method="post" action="https://firstfinancialbank.tfaforms.net/responses/processor" class="hintsBelow labelsAbove" id="55" role="form">
<div class="oneField field-container-D " id="tfa_2-D">
<label id="tfa_2-L" class="label preField reqMark" for="tfa_2"><b>First Name</b></label><br><div class="inputWrapper"><input type="text" id="tfa_2" name="tfa_2" value="" aria-required="true" title="First Name" class="validate-custom ^[a-zA-Z]+$ required"></div>
<script type="text/javascript">
if(typeof wFORMS != 'undefined') {
if(wFORMS.behaviors.validation) {
wFORMS.behaviors.validation.rules['customtfa_2'] = { selector: '*[id="tfa_2"]', check: 'validateCustom'};
wFORMS.behaviors.validation.messages['customtfa_2'] = "Please enter only letters";
}
}</script>
</div>
<div class="oneField field-container-D " id="tfa_3-D">
<label id="tfa_3-L" class="label preField reqMark" for="tfa_3"><b>Last Name</b></label><br><div class="inputWrapper"><input type="text" id="tfa_3" name="tfa_3" value="" aria-required="true" title="Last Name" class="validate-custom ^[a-zA-Z]+$ required"></div>
<script type="text/javascript">
if(typeof wFORMS != 'undefined') {
if(wFORMS.behaviors.validation) {
wFORMS.behaviors.validation.rules['customtfa_3'] = { selector: '*[id="tfa_3"]', check: 'validateCustom'};
wFORMS.behaviors.validation.messages['customtfa_3'] = "Please enter letters only";
}
}</script>
</div>
<div class="oneField field-container-D " id="tfa_1-D">
<label id="tfa_1-L" class="label preField reqMark" for="tfa_1"><b>Email</b></label><br><div class="inputWrapper"><input type="text" id="tfa_1" name="tfa_1" value="" aria-required="true" title="Email" class="validate-email required"></div>
</div>
<div class="oneField field-container-D " id="tfa_4-D">
<label id="tfa_4-L" class="label preField reqMark" for="tfa_4"><b>Phone Number</b></label><br><div class="inputWrapper"><input type="text" id="tfa_4" name="tfa_4" value="" aria-required="true" autoformat="###-###-####" title="Phone Number" class="validate-custom /^[1-9]{3}[-][0-9]{3}[-][0-9]{4}$/ required"></div>
<script type="text/javascript">
if(typeof wFORMS != 'undefined') {
if(wFORMS.behaviors.validation) {
wFORMS.behaviors.validation.rules['customtfa_4'] = { selector: '*[id="tfa_4"]', check: 'validateCustom'};
wFORMS.behaviors.validation.messages['customtfa_4'] = "Please enter a valid phone number.";
}
}</script>
</div>
<div class="oneField field-container-D " id="tfa_5-D">
<label id="tfa_5-L" class="label preField reqMark" for="tfa_5"><b>State</b></label><br><div class="inputWrapper"><select id="tfa_5" name="tfa_5" title="State" aria-required="true" class="required"><option value="">Please select...</option>
<option value="tfa_6" id="tfa_6" data-conditionals="#tfa_11" class="">IL</option>
<option value="tfa_7" id="tfa_7" data-conditionals="#tfa_15" class="">OH</option>
<option value="tfa_8" id="tfa_8" data-conditionals="#tfa_28" class="">IN</option>
<option value="tfa_9" id="tfa_9" data-conditionals="#tfa_45" class="">KY</option>
<option value="tfa_10" id="tfa_10" class="">Other</option></select></div>
</div>
<div class="oneField field-container-D " id="tfa_11-D">
<label id="tfa_11-L" class="label preField " for="tfa_11"><b>City</b></label><br><div class="inputWrapper"><select id="tfa_11" name="tfa_11" data-condition="`#tfa_6`" title="City" class=""><option value="">Please select...</option>
<option value="tfa_12" id="tfa_12" class="">Kankakee, IL</option>
<option value="tfa_13" id="tfa_13" class="">Watseka, IL</option>
<option value="tfa_14" id="tfa_14" class="">Hoopeston, IL</option></select></div>
</div>
<div class="oneField field-container-D " id="tfa_15-D">
<label id="tfa_15-L" class="label preField " for="tfa_15"><b>City</b></label><br><div class="inputWrapper"><select id="tfa_15" name="tfa_15" data-condition="`#tfa_7`" title="City" class=""><option value="">Please select...</option>
<option value="tfa_16" id="tfa_16" class="">Columbus, OH</option>
<option value="tfa_17" id="tfa_17" class="">Celina, OH</option>
<option value="tfa_18" id="tfa_18" class="">Cincinnati, OH</option>
<option value="tfa_19" id="tfa_19" class="">Dayton, OH</option>
<option value="tfa_20" id="tfa_20" class="">Hamilton, OH</option>
<option value="tfa_21" id="tfa_21" class="">Harrison, OH</option>
<option value="tfa_22" id="tfa_22" class="">Van Wert, OH</option>
<option value="tfa_23" id="tfa_23" class="">Worthington, OH</option>
<option value="tfa_24" id="tfa_24" class="">Mason, OH</option>
<option value="tfa_25" id="tfa_25" class="">West Chester, OH</option>
<option value="tfa_26" id="tfa_26" class="">Trenton, OH</option>
<option value="tfa_27" id="tfa_27" class="">Upper Arlington, OH</option></select></div>
</div>
<div class="oneField field-container-D " id="tfa_28-D">
<label id="tfa_28-L" class="label preField " for="tfa_28"><b>City</b></label><br><div class="inputWrapper"><select id="tfa_28" name="tfa_28" data-condition="`#tfa_8`" title="City" class=""><option value="">Please select...</option>
<option value="tfa_29" id="tfa_29" class="">Indianapolis, IN</option>
<option value="tfa_30" id="tfa_30" class="">Bloomington, IN</option>
<option value="tfa_31" id="tfa_31" class="">Columbus, IN</option>
<option value="tfa_32" id="tfa_32" class="">Lafayette, IN</option>
<option value="tfa_33" id="tfa_33" class="">Greensburg, IN</option>
<option value="tfa_34" id="tfa_34" class="">Highland, IN</option>
<option value="tfa_35" id="tfa_35" class="">Hartford City, IN</option>
<option value="tfa_36" id="tfa_36" class="">Rochester, IN</option>
<option value="tfa_37" id="tfa_37" class="">Madison, IN</option>
<option value="tfa_38" id="tfa_38" class="">New Albany, IN</option>
<option value="tfa_39" id="tfa_39" class="">Lawrenceburg, IN</option>
<option value="tfa_40" id="tfa_40" class="">Batesville, IN</option>
<option value="tfa_41" id="tfa_41" class="">Shelbyville, IN</option>
<option value="tfa_42" id="tfa_42" class="">Seymour, IN</option>
<option value="tfa_43" id="tfa_43" class="">Richmond, IN</option>
<option value="tfa_44" id="tfa_44" class="">Rushville, IN</option></select></div>
</div>
<div class="oneField field-container-D " id="tfa_45-D">
<label id="tfa_45-L" class="label preField " for="tfa_45"><b>City</b></label><br><div class="inputWrapper"><select id="tfa_45" name="tfa_45" data-condition="`#tfa_9`" title="City" class=""><option value="">Please select...</option>
<option value="tfa_46" id="tfa_46" class="">Louisville, KY</option>
<option value="tfa_47" id="tfa_47" class="">Hebron, KY</option>
<option value="tfa_48" id="tfa_48" class="">Lawrenceburg, KY</option></select></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_49-D">
<label id="tfa_49-L" class="label preField " for="tfa_49"><b>Period</b></label><br><div class="inputWrapper"><input type="text" id="tfa_49" name="tfa_49" value="" title="Period" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_50-D">
<label id="tfa_50-L" class="label preField " for="tfa_50"><b>Amount</b></label><br><div class="inputWrapper"><input type="text" id="tfa_50" name="tfa_50" value="" title="Amount" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_51-D">
<label id="tfa_51-L" class="label preField " for="tfa_51"><b>LTV</b></label><br><div class="inputWrapper"><input type="text" id="tfa_51" name="tfa_51" value="" title="LTV" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_52-D">
<label id="tfa_52-L" class="label preField " for="tfa_52"><b>Source</b></label><br><div class="inputWrapper"><input type="text" id="tfa_52" name="tfa_52" value="" title="Source" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_53-D">
<label id="tfa_53-L" class="label preField " for="tfa_53"><b>Transaction</b></label><br><div class="inputWrapper"><input type="text" id="tfa_53" name="tfa_53" value="" title="Transaction" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_54-D">
<label id="tfa_54-L" class="label preField " for="tfa_54"><b>Property Type</b></label><br><div class="inputWrapper"><input type="text" id="tfa_54" name="tfa_54" value="" title="Property Type" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_55-D">
<label id="tfa_55-L" class="label preField " for="tfa_55"><b>FICO</b></label><br><div class="inputWrapper"><input type="text" id="tfa_55" name="tfa_55" value="" title="FICO" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_56-D">
<label id="tfa_56-L" class="label preField " for="tfa_56"><b>Occupancy</b></label><br><div class="inputWrapper"><input type="text" id="tfa_56" name="tfa_56" value="" title="Occupancy" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_57-D">
<label id="tfa_57-L" class="label preField " for="tfa_57"><b>Cashout</b></label><br><div class="inputWrapper"><input type="text" id="tfa_57" name="tfa_57" value="" title="Cashout" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_58-D">
<label id="tfa_58-L" class="label preField " for="tfa_58"><b>Rate</b></label><br><div class="inputWrapper"><input type="text" id="tfa_58" name="tfa_58" value="" title="Rate" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_59-D">
<label id="tfa_59-L" class="label preField " for="tfa_59"><b>Fees</b></label><br><div class="inputWrapper"><input type="text" id="tfa_59" name="tfa_59" value="" title="Fees" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_60-D">
<label id="tfa_60-L" class="label preField " for="tfa_60"><b>Points</b></label><br><div class="inputWrapper"><input type="text" id="tfa_60" name="tfa_60" value="" title="Points" class=""></div>
</div>
<div class="oneField field-container-D wf-acl-hidden" id="tfa_61-D">
<label id="tfa_61-L" class="label preField " for="tfa_61"><b>Informa Tracking ID</b></label><br><div class="inputWrapper"><input type="text" id="tfa_61" name="tfa_61" value="" title="Informa Tracking ID" class=""></div>
</div>
<div class="actions" id="55-A"><input type="submit" data-label="Submit" class="primaryAction" id="submit_button" value="Submit"></div>
<div style="clear:both"></div>
<input type="hidden" value="55" name="tfa_dbFormId" id="tfa_dbFormId"><input type="hidden" value="" name="tfa_dbResponseId" id="tfa_dbResponseId"><input type="hidden" value="0474c1303e390b268a35393d6f761c3e" name="tfa_dbControl" id="tfa_dbControl"><input type="hidden" value="86" name="tfa_dbVersionId" id="tfa_dbVersionId"><input type="hidden" value="" name="tfa_switchedoff" id="tfa_switchedoff">
</form>Solution
Tl:Dr Changed window.onload to $( document ).ready
I had to change from:
window.onload = function(){
document.getElementById("tfa_49").value = period;
document.getElementById("tfa_50").value = loan;
document.getElementById("tfa_51").value = ltv;
document.getElementById("tfa_53").value = transaction;
document.getElementById("tfa_54").value = property_type;
document.getElementById("tfa_55").value = fico;
document.getElementById("tfa_56").value = occupancy;
document.getElementById("tfa_57").value = cashout;
document.getElementById("tfa_58").value = rate;
document.getElementById("tfa_59").value = fees;
document.getElementById("tfa_60").value = points;
document.getElementById("tfa_61").value = trackingID;
}to:
//On load function to prefill the forms hidden fields
$( document ).ready(function() {
document.getElementById("tfa_49").value = period;
document.getElementById("tfa_50").value = loan;
document.getElementById("tfa_51").value = ltv;
document.getElementById("tfa_53").value = transaction;
document.getElementById("tfa_54").value = property_type;
document.getElementById("tfa_55").value = fico;
document.getElementById("tfa_56").value = occupancy;
document.getElementById("tfa_57").value = cashout;
document.getElementById("tfa_58").value = rate;
document.getElementById("tfa_59").value = fees;
document.getElementById("tfa_60").value = points;
document.getElementById("tfa_61").value = trackingID;
});- How to list the properties of a JavaScript object?
- You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client"
- Polyfill for TextDecoder
- How to display an image in HTML via a JSON file using Javascript
- What is the purpose of the dollar sign in JavaScript?
- Importing ethers via Hardhat fails despite official testing documentation
- Using http methods with django rest framework
- Is there a way to create dynamic ranges given an array of values, and counting how many belong to each range
- Get audio.duration with JavaScript from URL
- How do I programmatically set the value of a select box element using JavaScript?
- Triggering a file download without any server request
- How to access the request body when POSTing using Node.js and Express?
- How can I how one div and hide multiple others with jQuery?
- Printing only a textarea
- Finding min and max in array Javascript
- Javascript - Copy to clipboard without concrete Id in HTML tag
- Finding the FORM that an element belongs to in JavaScript
- Where to save a JWT in a browser-based application and how to use it
- Trim an audio file using javascript (first 3 seconds)
- Failed to execute 'atob' on 'Window'
- How to render my web component before connectedCallback but after constructor?
- Javascript: How to read a hand held barcode scanner best?
- How to count all objects in an array that match a condition?
- Split address and numbers
- why I can't delete .next folder in nextjs project
- handsontable unfreeze a column and return to original position
- Is this a redirect or not?
- Why `[1, 2, 3]` is not showing as an `Array(3)` in Console?
- Large numbers in React
- Dark & Light Mode: How to switch manifest and favicon?