changing value of marketo form before submit

[dondmcg]

So adding the REDACTED option and hiding it with js.  Would also work no? Just like you did in your blog post?

And I am not familiar with how to remove the literal mask applied to the inputs can you point me in the right direction?  

Thanks for the help I will mark this as the accepted solution.

[SanfordWhiteman]

---

So adding the REDACTED option and hiding it with js.  Would also work no? Just like you did in your blog post?

---

Yes, it would.

---

And I am not familiar with how to remove the literal mask applied to the inputs can you point me in the right direction?  

Like so:

MktoForms2.whenReady(function(mktoForm){
  mktoForm.getFormElem().find("[name='Phone']").unmask()
});

[dondmcg]

OK I see how you add it on marketo "whenReady" however I need the form to validate first then inside the onSubmit after running some code I call a method to submit the form.  So this is much later than "whenReady".

I found this code:

MktoForms2.$("body").on("mkto_inputmask_polyfilled", function(e) {
    MktoForms2.whenReady(function(form) {
     // your code here
    });
});

but the eventListener "mkto_inputmask_polyfilled" and/or "whenReady" never ran.

I do not want to remove the mask on whenReady I only want to remove it after validation inside the onSubmit so the mask would be applied during the filling out of forms but removed before the form sends the data to the endpoint, how would I get the unmask() to run after the whenReady?

Inside the onSubmit I am currently trying to apply the code you suggest but inside a loop that finds all the inputs needed to be unmasked, like so:

if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    return resArray;
  }
};
MktoForms2.loadForm(
    form.onSubmit(function (e) {
        let dataObj = {};
        form.submittable(false);
        let hasPersonal = false
        const submitMarketo() {
            form.submittable(true).submit();
        }
        for (const [key, value] of Object.entries(e.vals())) {
            if (key.includes("personal_")) {
                hasPersonal = true;
                // set up data object for passing to 3rdparty
                let key_test = key + '_decrypted';
                dataObj[key_test] = value; 
                // set up form elements for subitting to marketo sans personal data 
                form.getFormElem().find('[name=' + key + ']').unmask();
                // I get an error here stating that the value does not match the mask
                // but I am expecting the mask to be removed here
                form.setValues({[key]: 'REDACTED'});
                console.log(form.vals());
            }
        }
        if(hasPersonal)
            // personal info so send personal info off to third party
            // then submit marketo info redacted 
            // doStuff is not included it is a ajax call to third party
            console.log(dataObj);
            submitMarketo();         
        } else {
            // no personal info
            form.submittable(true).submit();
        }
    }
});

If you check the code in the comments I have indicated where i see the mask error still, inside the loop.  Any help?

[SanfordWhiteman]

Please rewrite that as IE-compatible code so I don't have to fix that first, thanks.

[dondmcg]

I added a polyfill that should make the code backward compatible. Let me know if that does not suffice?

But something strange I noticed was that I have at least two inputs with masks applied to them.  The first is a date of birth.  The second is a phone number.  I do not get the same error for phone number mask.  It accepts the phone number as the value "REDACTED" while the date of birth gives an error of:

The specified value "REDACTED" does not conform to the required format, "yyyy-MM-dd".

Also keep in mind the above code is pseudo I removed a bunch of stuff to illustrate more clearly the important functions.

[dondmcg]

Please help.  I have tried several ways of removing the input mask on the fields. With no luck

const thisForm = document.getElementById('mktoForm_' + formId);
const phiFields = thisForm.querySelectorAll('[name^="personal_"]:not(select)');
    for (var i=phiFields.length;i--;) {
      phiFields[i].unmask();
    }

I know that the MktoForms2 api comes with a masking function but not sure how to hook into it to unmask.

Do I pass an empty string to empty it out instead of trying to use unmask() ?

[SanfordWhiteman]

---

I know that the MktoForms2 api comes with a masking function but not sure how to hook into it to unmask.

---

? That's exactly what you're doing with unmask(). You're talking to the mask plugin.

Pls provide a link to the page where you're working on this,

[dondmcg]

Right now everything is local I will work on getting a dev site up that you can access.

[dondmcg]

Let me know if you can see this page: https://env6.northwell.edu/test-phi-marketo-form-0

To see the error submit the form with "test" as the value for every string and 1111111111 for every phone and 07221969 for the date of birth and test@test.com for email.

[SanfordWhiteman]

There's no Marketo field mask on that form.