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


Answers:


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

要回答第二个问题:

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

56
请注意,如果您在创建输入类型后尝试更改其输入类型,则IE将会阻塞。使用$('<input type="hidden">').foo(...)作为一种变通方法。
罗伊·廷克

4
另外,jQuery文档建议,由于DOM操作昂贵,因此如果要添加多个输入,请使用$(this).append(hidden_​​element_array.join(''))之类的所有输入添加一次。
Kedar Mhaswade

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

.prop在更新的API版本中,这种方法是否可以与更新的功能一起使用?
SpaceBison 2012年

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

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

1
有人在旧版IE上测试了此答案吗?
亚瑟·霍尔玛

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

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

34

与David相同,但没有attr()

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

3
这种填充标签的方式有名称吗?
DLF85 '16

如何仅追加1次输入?如果它的存在,继续输入与相同属性的新值
雪波基

非常精简,我喜欢。
雅克

27

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

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

要么

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

这给控制台错误 Unexpected identifier
Prafulla Kumar Sahu's

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

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

2
什么是'name-as-seen-at-the-server'
SaAtomic

1

工作中的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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.