jQuery-动态创建隐藏的表单元素

使用jQuery动态创建隐藏的输入表单字段的最简单方法是什么？

#1 楼

$('<input>').attr('type','hidden').appendTo('form');

回答第二个问题：

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

请注意，如果在创建输入类型后尝试更改其输入类型，则IE会阻塞。使用$（''）。foo（...）作为解决方法。

–罗伊·廷克（Roy Tinker）
2011年10月6日下午4:18

另外，jQuery文档建议，由于DOM操作昂贵，如果要添加多个输入，请使用$（this）.append（hidden_element_array.join（''））之类的内容将所有输入添加一次。

–凯达·玛斯瓦德
11年2月2日在20:29

我刚刚使用jQuery 1.6.2尝试了此方法，并在Firefox 7.0.1中收到了此错误：“未捕获的异常：类型属性无法更改”在这些情况下，您似乎无法使用attr方法更改类型属性。我现在正在尝试下面的方法...

–迈克波特
2011年11月11日7:17

相同的方法是否可以在较新的API版本中与较新的.prop函数一起使用？

–SpaceBison
2012年8月31日在9:18

@SpaceBison .prop不是很多人认为的“新.attr”。您仍应使用.attr设置属性。

– David Hellsing
13年3月25日在13:33

#2 楼

$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');

有人在旧版IE上测试了此答案吗？

– Arthur Halma
2012年8月31日上午11:54

就我个人而言，我认为这是一种比公认的答案更好的方法，因为它涉及的DOM操作/函数调用更少。

– PaulSkinner
13年8月5日在9:38

@PaulSkinner对于给定的情况，是的，您是正确的，但并非总是如此。在这里看看stackoverflow.com/a/2690367/1067465

–费尔南多·席尔瓦（Fernando Silva）
2014年8月6日在18:08

#3 楼

与David相同，但没有attr（）

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

这种填充标签的方式是否有名称？

– DLF85
16 Mar 8 '16 at 5:24

如何仅追加1次输入？如果存在，则继续输入具有相同属性的新值

–雪地
18年6月28日在8:10

非常精简，我喜欢它。

–雅克
18年8月9日在21:23

#4 楼

如果要添加更多属性，请执行以下操作：

$('<input>').attr('type','hidden').attr('name','foo[]').attr('value','bar').appendTo('form');

或

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

这给出了控制台错误意外标识符。

– Prafulla Kumar Sahu
17年7月19日在8:00

第二个代码，似乎需要动态生成“ id”，例如foo1，foo2等

– Web_Developer
'18 -10-1在8:00

#5 楼

function addHidden(theForm, key, value) {
    // Create a hidden input element, and append it to the form:
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = key; //name-as-seen-at-the-server
    input.value = value;
    theForm.appendChild(input);
}

// Form reference:
var theForm = document.forms['detParameterForm'];

// Add data:
addHidden(theForm, 'key-one', 'value');

“在服务器上看到的名称”是什么？

– SaAtomic
17年3月13日在6:31

#6 楼

可以使用的JSFIDDLE

如果您的表单类似于

<form action="" method="get" id="hidden-element-test">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
</form> 
    <br><br>   
    <button id="add-input">Add hidden input</button>
    <button id="add-textarea">Add hidden textarea</button>

您可以将隐藏的输入和文本区域添加到这样的表单中

$(document).ready(function(){

    $("#add-input").on('click', function(){
        $('#hidden-element-test').prepend('<input type="hidden" name="ipaddress" value="192.168.1.201" />');
        alert('Hideen Input Added.');
    });

    $("#add-textarea").on('click', function(){
        $('#hidden-element-test').prepend('<textarea name="instructions" style="display:none;">this is a test textarea</textarea>');
        alert('Hideen Textarea Added.');
    });

});

在这里检查可工作的jsfiddle

编程黑洞网