Hubspot表单onFormReady报错：e.serializeArray不是函数，求非jQuery替代方案

报错原因很明确：onFormReady回调里的参数e是原生DOM表单元素，不是jQuery对象，所以没有serializeArray()、find()这些jQuery专属方法，自然会报错。

下面是纯原生JavaScript的替代方案，完全不需要依赖jQuery：

<script>
  hbspt.forms.create({
    region: "",
    portalId: "",
    formId: "",
    redirectUrl: "/thank-you/",
    onFormReady: function(formElement){
      // 获取表单内所有可输入控件（input/select/textarea）
      const formControls = formElement.querySelectorAll('input, select, textarea');
      
      // 遍历每个控件
      formControls.forEach(control => {
        const controlName = control.name;
        if (!controlName) return; // 跳过没有name属性的控件
        
        // 读取对应cookie值
        const cookieVal = Cookies.get(controlName);
        if (cookieVal && cookieVal.trim() !== '') {
          // 给控件赋值
          control.value = cookieVal;
          
          // 手动触发change事件，确保Hubspot能检测到值的变化
          const changeEvent = new Event('change', { bubbles: true });
          control.dispatchEvent(changeEvent);
        }
      });
    }
  });
</script>

关键改动说明： #

• 把参数e重命名为formElement（更清晰，明确是原生DOM元素）
• 用querySelectorAll替代jQuery的find()，获取表单内所有输入控件
• 直接遍历控件，通过control.name获取控件名称，匹配cookie
• 用原生DOM的control.value赋值，替代jQuery的.val()
• 手动创建并触发change事件，确保Hubspot表单能感知到值的更新（原生JS不会自动触发change事件，必须手动dispatch）

额外注意点： #

• 确保你使用的Cookies库（比如js-cookie）已经正确引入，否则Cookies.get()会失效
• 如果表单里有复选框、单选框这类特殊控件，需要额外处理（比如复选框要判断cookie值是否匹配选项值，再设置checked属性），上面的代码针对常规输入框、下拉框、文本域已经足够。

内容的提问来源于stack exchange，提问作者Justin