Visually hide form changes during submission?

Casey_Grimes · ‎01-24-2018

I'm working on a form that does some data manipulation of content sent before it gets stored in Marketo. Part of this is giving users an open text area to write in, but I also want to capture some on-page variables into that same text area value when stored, so I'm using onSubmit() and form.vals{} to insert the variables. It works great, but with one caveat: for ~50-100ms, the user can see that the variable has been added to their text while the form itself submits.

Is there any way to edit this so the person's view of what they typed in doesn't change while still getting the data back to Marketo? Alternately, I can just visually remove the form with onSubmit() but wanted to know if another alternative exists.

SanfordWhiteman · ‎01-24-2018

Courtney, do it like this, "shadowing" the visible field value so the user doesn't know you're updating it on the fly:

   form.onSubmit(function(form) {
      var currentValues = freezeVisibleValues(form, ["FirstName"]);
      // now, setValues() will change the posted values
      // but will not affect the visible values
      form.setValues({
         FirstName: currentValues.FirstName + " [modified]"
      });
      
   });
   /* --- NO NEED TO EDIT BELOW THIS LINE! --- */
   /**
    * freezes (and retrieves) currently visible values
    * @param form    Marketo form object
    * @param fields  array of fields you want to freeze
    */
   function freezeVisibleValues(form, fields) {
      var formEl = form.getFormElem()[0],
         currentValues = form.getValues(),
         shadowValueAttr = "data-shadow-value";
      fields.forEach(function(field) {
         var fieldEl = formEl.querySelector("[name='" + field + "']");
         Object.defineProperties(fieldEl, {
            frozenValue: {
               value: currentValues[field]
            },
            value: {
               get: function() {
                  return this.hasAttribute(shadowValueAttr)
                     ? this.getAttribute(shadowValueAttr)
                     : this.frozenValue;
               },
               set: function(value) {
                  this.setAttribute(shadowValueAttr, value);
               }
            }
         });
      });
      return currentValues;
   }

View solution in original post