如何动态添加“隐藏”字段来形成？

Posted 2021-04-19

我使用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。

答案

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

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

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

Query Selector Docs

另一答案

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

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

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

另一答案

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

使用：

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);

另一答案

尝试类似的东西：

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

另一答案

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

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

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

另一答案

使用Jquery

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