使用 Javascript 设置 HubSpot 隐藏表单字段的值答案

【问题标题】：Set value of a HubSpot hidden form field using Javascript使用 Javascript 设置 HubSpot 隐藏表单字段的值
【发布时间】：2021-08-26 18:45:39
【问题描述】：

我在网站头部有一小段 Javascript 代码：

<!-- Unique form ID -->
<script>
   document.querySelector('input[name=form_submission_id]').value = new Date();
</script>

我的目标是获取一个名为“表单提交 ID”的隐藏表单字段以填充日期戳，但我不断收到错误 - 无法将属性“值”设置为 null

如果我进入检查器工具并取消隐藏隐藏的表单字段，上面的代码可以工作，如果它被隐藏，我会收到错误。

这是实时表单的链接：https://easytrimreveals.com/samples/

我假设它是在脚本已经触发后加载的表单，但如果是这种情况，我不确定如何解决。

我尝试为脚本触发创建超时延迟，但这似乎也不起作用..

<script>

  var formId = function() {
      document.querySelector('input[name=form_submission_id]').value = new Date();
  }
  document.onload = function() {
  setTimeout(formId, 3000);
}

</script>

【问题讨论】：

window.addEventListener('load', (event) => { document.querySelector('input[name="form_submission_id"]').value = new Date(); });
试过了，还是一样的错误。无法将属性“值”设置为 null。
关注'input[name="form_submission_id"]'
我把引号放进去，同样的错误..
您似乎正在使用在 iframe 中提供的 Hubspot 表单。我对 Hubspot 不太熟悉，但我认为您可能必须在 Hubspot 提供的事件之一中进行更改（很可能是在 onFormSubmit 事件中）。

标签： javascript forms

【解决方案1】：

最后得到朋友的帮助并解决了！

感谢您的帮助！

<script>
window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="form_submission_id"]').value = new Date();
   }
});
</script>

【讨论】：