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

Mit*_*ran 320 javascript forms jquery hidden-field

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

Dav*_*ing 585

$('<input>').attr('type','hidden').appendTo('form');
Run Code Online (Sandbox Code Playgroud)

回答你的第二个问题:

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

  • 请注意,如果您在创建输入类型后尝试更改输入类型,IE将会阻塞.使用`$('<input type ="hidden">').foo(...)`作为解决方法. (55认同)
  • 此外,jQuery文档表明,由于DOM操作很昂贵,如果要添加多个输入,请使用$(this).append(hidden_​​element_array.join(''))等添加所有输入. (4认同)
  • 很多人似乎都认为@SpaceBison` .prop`不是"新的`.attr`".您仍然应该使用`.attr`来设置属性. (3认同)

Mar*_*ell 132

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

  • 就个人而言,我认为这是一个比接受的答案更好的方法,因为它涉及较少的DOM操作/函数调用. (10认同)
  • @PaulSkinner对于给定的情况,是的,你是对的,但并非总是如此.看看http://stackoverflow.com/a/2690367/1067465 (2认同)

Ser*_*nko 30

和大卫一样,但没有attr()

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

  • 这种填充标记的方式有名称吗? (2认同)

Sli*_*eam 25

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

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

要么

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


Sau*_*tel 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');
Run Code Online (Sandbox Code Playgroud)

  • 什么是“服务器上的名称”? (2认同)