Relative Path for Embed Forms

[Rocky_Patel]

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?

[SanfordWhiteman]

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

[Rocky_Patel]

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]

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.