Updating Squarespace React Form Values via Javascript

The Problem

Over several years I helped a client add extensive JavaScript to manipulate the values of various products’ “add to cart” form value inputs. The updates standardized the content and added conditional fields with required subfields.

Then Squarespace dramatically changed how those forms worked internally. Suddenly any form input values that were changed programmatically would reset to their user-entered values. Not only did this undo our work, but in many cases it would prevent the form from submitting because unrevealed required fields would not have the "placeholder" value we had assigned via code.

The user could not submit the form at all.

The Solution

We needed to change the way the values are set via JavaScript so the Squarespace React framework stores the new values.

In trying to find the solution I found this forum post that happened to have similar keywords: https://forum.squarespace.com/topic/258017-programmatically-updating-hidden-form-field-values-after-the-squarespace-form-changes/

The original post and answer was not about the problem we were having, but at the bottom of the thread contributor @JakeBohall offered a way to send the new values to Squarespace’s React. My hero!

Here is the function I ended up with that worked for me. This will update a single input.

Note: I didn’t need the setTimeout persistence that @JakeBohall used.

function setInputValue($el, val) {
    var textField = $el.get(0); // get html element from jQuery element
    
    // use React-compatible method to update field
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
    ).set;
    nativeInputValueSetter.call(textField, val);

    // dispatch change" event
    var changeEvent = new Event("change", { bubbles: true });
    textField.dispatchEvent(changeEvent);
}
// set a value
setInputValue($("#myInput"), "My great value!");

Of course you don’t need to use jQuery, it can be adapted to use vanilla JavaScript:

function setInputValue(textField, val) {    
    // use React-compatible method to update field
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
    ).set;
    nativeInputValueSetter.call(textField, val);

    // dispatch change" event
    var changeEvent = new Event("change", { bubbles: true });
    textField.dispatchEvent(changeEvent);
}
// set a value
setInputValue(document.getElementById(“myInput”), “My great value!”);

I hope that helps someone like it helped me!