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：http://jsfiddle.net/eLazhj3d/1。

但适用于type = text：http://jsfiddle.net/eLazhj3d/2。

Answer 1

使用document.querySelector()函数，你可以使用css选择器库来定位任何元素，所以在你的情况下：

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

会获得form标记的任何元素。

Query Selector Docs

Answer 2

如果页面中只有一个表单标记，则可以使用

document.getElementsByTagName("form")[0];

它将返回一个数组，只需获取第一个索引中的元素

Answer 3

这是一个工作小提琴（带有可见的文字字段）：

使用：

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

http://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);

Answer 4

尝试类似：

document.forms[0].appendChild(input);

Answer 5

您可以使用返回数组的getElementsByTagName。

如果它是页面上的第一个表单就像是

document.getElementsByTagName('form')[0].appendChild(input);

Answer 6

使用Jquery

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar',
    value: 'value'
}).appendTo('form');

如何动态添加＆＃34;隐藏＆＃34;领域形成？

6 个答案: