如何动态添加“;隐藏的“;要形成的字段

How to dynamically add "hidden" field to form?

本文关键字：何动态 字段 隐藏 动态 添加      更新时间：2023-09-26

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

如何将预定义的隐藏字段动态添加到表单中？表单没有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.

这里有一个正在工作的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);

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

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

将获得任何属于form标记的元素。

查询选择器文档

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

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

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

使用Jquery

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

尝试以下操作：

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

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

如果这是页面上的第一个表单，它将类似于

document.getElementsByTagName('form')[0].appendChild(input);
相关文章：