Skip to main content
New Participant
October 22, 2019
Question

Relative Path for Embed Forms

  • October 22, 2019
  • 3 replies
  • 2962 views

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

rocky06Author
New Participant
October 22, 2019

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>
SanfordWhiteman
Level 10
October 22, 2019

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.

SanfordWhiteman
Level 10
October 22, 2019

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;
});
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍