javascript - 如何给表单动态添加 "hidden"字段？

Question

我使用 OptimizePress(wordpress 主题)。它有很好的选择加入表单，但不幸的是，没有办法通过他们的 UI 添加隐藏的表单字段。我确实可以选择为每个页面添加自定义脚本。

如何将预定义的隐藏字段动态添加到表单中？表单没有 ID。像下面这样的事情可能会起作用，但是当没有表单 ID 时怎么办呢？

var input = document.createElement("input");

input.setAttribute("type", "hidden");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", "value_you_want");

//append to form element that you want .
document.getElementById("formname").appendChild(input);

这是页面上唯一的表单。

使用下面的一些示例，它不适用于 type=hidden:https://jsfiddle.net/eLazhj3d/1 .

但适用于 type=text:https://jsfiddle.net/eLazhj3d/2 .

Answer 1

这是一个有效的 fiddle (显示一个可见的文本字段):

使用:

document.querySelector("form").appendChild(input);

https://jsfiddle.net/s55snxtn/

代码:html:

<form action=""><input type="text"/>
</form> 

javascript:

var input = document.createElement("input");

input.setAttribute("type", "text");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", "value_you_want");

//append to form element that you want .
document.querySelector("form").appendChild(input);