Relative Path for Embed Forms

Highlighted
Level 1

Relative Path for Embed Forms

Sanford Whiteman

I need to change the follow up url to relative path depending on a radio button selection.  See code below.

<div class="mktoRadioList mktoHasWidth" style="width: 380px;"><input name="pERContactUsFormType" id="mktoRadio_32448_0" value="Solutions and Product Inquiries" type="radio" class="mktoField"><label for="mktoRadio_32448_0">Solutions and Product Inquiries</label><input name="pERContactUsFormType" id="mktoRadio_32448_1" value="Client Service Requests" type="radio" class="mktoField"><label for="mktoRadio_32448_1">Client Service Requests</label></div>

So when someone selects "Solutions and Product Inquiries" the follow up URL should be /contact/thankyou.  If they select "Client Service Requests" follow up URL should be /contact/customer-service-thank-you.

Can something like this be done through JS?

3 REPLIES 3
Highlighted
Level 10 - Community Moderator

Re: Relative Path for Embed Forms

Set up a map between values and paths, then grab the appropriate path in the onSuccess.  

MktoForms2.whenReady(function(form){
var contactUsField = "pERContactUsFormType",
contactUsFollowUpMap = {
"Solutions and Product Inquiries" : "/contact/thankyou",
"Client Service Requests" : "/contact/customer-service-thank-you"
};

form.onSuccess(function(values,tyURL){
var tyLoc = document.createElement("a");

tyLoc.href = tyURL;
tyLoc.protocol = document.location.protocol;
tyLoc.hostname = document.location.hostname;
tyLoc.pathname = contactUsFollowUpMap[values[contactUsField]];

document.location.href = tyLoc.href;

return false;
});
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Level 1

Re: Relative Path for Embed Forms

Hey Sanford Whiteman

Thanks for assisting with this.  So I added the code you provided in my overall JS.  I added your code on line 9-13 and 104-115 (changed your onSuccess to onSubmit), but the followup is still point to the absolute url.  Did I not include properly?    

<script>
if (typeof MktoForms2 !== "undefined" || MktoForms2 !== null) {
MktoForms2.whenReady(function (form) {

// Variables
var formEl = form.getFormElem()[0];
var submitEl = formEl.querySelector('BUTTON[type="submit"]');
var recaptchaEl = document.querySelector('.g-recaptcha');
var contactUsField = "pERContactUsFormType",
contactUsFollowUpMap = {
"Solutions and Product Inquiries" : "/contact/thankyou",
"Client Service Requests" : "/contact/customer-service-thank-you"
};


// Set form submittable to false
form.submittable(false);

// Move reCAPTCHA inside form container
form.getFormElem().find('.mktoButtonRow').prepend(recaptchaEl);

// Disable Submit Button
if (!$(".mktoForm input[name='pERContactUsFormType']").is(':checked')) {
$('.mktoForm button.mktoButton').prop('disabled', true);
}
$(".mktoForm input[name='pERContactUsFormType']").change(function () {
$('.mktoForm button.mktoButton').prop('disabled', false);
});

// Modal Logic
$('#investors').modal({
show: false
})
$('body').on('change', '.mktoForm select#pERProfession', function () {
if ($(this).val() == "Investor (Individual Account Holder)") {
$('#investors').modal('show');
}
});

// Add form validation callback
form.onValidate(function (builtInValidation) {
// If the default validation has failed, dont bother running
if (!builtInValidation) return;

// Was a Phone Number Provided
var phoneNum = form.vals().Phone;
if (typeof phoneNum !== "undefined" && phoneNum) {
// Phone number invalid
var digits = phoneNum.match(/\d/g).length;
if (digits < 9 && digits > 0) {
form.submittable(false);
var phoneElem = form.getFormElem().find("#Phone");
form.showErrorMessage(
"Must be a phone number. <span class='mktoErrorDetail'>503-555-1212</span>",
phoneElem);
return;
} else {
form.submittable(true);
}
}

// Get Google reCAPTCHA validation response
var recaptchaResponse = grecaptcha.getResponse();

// Check reCAPTCHA response and apply Valid / Invalid class as required
if (!recaptchaResponse) {
recaptchaEl.className = 'g-recaptcha mktoInvalid';
var captchaEl = form.getFormElem().find('.g-recaptcha');
form.showErrorMessage("Please complete reCAPTCHA", captchaEl);
form.submittable(false);
} else {
recaptchaEl.className = 'g-recaptcha';
form.addHiddenFields({
munchkinTokenLastShift: recaptchaResponse
});
form.submittable(true);
}
});

var clientServiceRequest = document.getElementById("mktoRadio_28232_1");
clientServiceRequest.addEventListener('change', function () {
contactFormIsClient = "Yes";
});


var checkboxContactFormIsClient = document.querySelectorAll("input[name='pERCurrentCustomer']");
for (var i = 0; i < checkboxContactFormIsClient.length; i++) {
checkboxContactFormIsClient[i].addEventListener('change', function () {
contactFormIsClient = this.value;
});
}

form.onSubmit(function () {
//alert(contactFormIsClient);
var contactForm = document.querySelector("form#mktoForm_1115");
var contactFormTopic = contactForm.querySelector(
"input[name='pERContactUsFormType']:checked").value;
_satellite.track('contact_submit', {
topic: contactFormTopic,
is_client: contactFormIsClient === 'Yes'
});
});

form.onSubmit(function(values,tyURL){
var tyLoc = document.createElement("a");

tyLoc.href = tyURL;
tyLoc.protocol = document.location.protocol;
tyLoc.hostname = document.location.hostname;
tyLoc.pathname = contactUsFollowUpMap[values[contactUsField]];

document.location.href = tyLoc.href;

return false;
});



});
}
</script>
Highlighted
Level 10 - Community Moderator

Re: Relative Path for Embed Forms

There's a lot there that I wouldn't do, including reading values directly from DOM elements (you don't need to do that).

But the main problem is you need to use onSuccess, not onSubmit.