使用 JS 将隐藏的表单字段添加到动态生成的 Squarespace 时事通讯块

Question

我正在尝试在 http://greig.cc/ 上向我的主页简报注册添加一个隐藏字段，以便我可以在 Mailchimp 中跟踪注册源。

这是我要注入页面的代码，但它引发了 'Uncaught TypeError: undefined is not a function' 错误，我无法弄清楚原因。

是否与页面加载后呈现表单的其余部分有关？（这就是我使用 class 名称来定位表单的原因）。

<script type="text/javascript">
var formcontainer = document.getElementsByClassName('newsletter-form');
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'SOURCE';
input.id = 'SOURCE';
input.value = 'homepage';
formcontainer.appendChild(input);
</script>

感谢阅读:)

Answer 1

document.getElementsByClassName returns一个数组，所以formcontainer包含一个元素数组（即使只有一个匹配元素）。

可能 formcontainer.appendChild(input) 失败了，因为 formcontainer 数组没有名为 appendInput.

的函数

尝试将 formcontainer.appendChild(input); 行更改为 formcontainer[0].appendChild(input); 并查看是否可以修复错误。

您还可以使用 Chrome 的检查器或 Firefox 开发工具在代码中设置断点。要调试这样的错误，我建议将断点放在代码的第一行，并且一次单步执行一行直到错误发生。这会将它缩小到一行，这样你就不会大海捞针:)

Answer 2

用最简单的方法，将隐藏字段添加到表单 HTML:

<input type="hidden" value="homepage" />

如果出于某种原因您必须使用 JavaScript，请将此脚本放在结束 </head> 标记之前：

<script language="JavaScript">  document.getElementById('newsletter-form').innerHTML += "<input type='hidden' value='homepage' />";
</script>

此外，将 id="newsletter-form" 属性添加到您的 <form> 标签。

这会将指定的 HTML 代码添加到具有指定 id 的表单中。

希望对你有所帮助:)

Answer 3

修正了我做两件事:)

(1) 在运行脚本
之前等待 DOM 加载 (2) 遍历 getElementsByClassName 获取数组中的第一项。 {因为我每页只有 1 个表格，所以懒得循环了}

<script language="JavaScript">
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false); 
function theDomHasLoaded(e) {
  var formelements = document.getElementsByClassName('newsletter-form');
  formelements[0].innerHTML += "<input name='SOURCE' id='SOURCE' type='hidden' value='homepage' />";
}
</script>

使用 JS 将隐藏的表单字段添加到动态生成的 Squarespace 时事通讯块

Adding a hidden form field to a dynamically generated Squarespace newsletter block using JS

javascript

mailchimp

squarespace