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

【问题标题】：jQuery - Create hidden form element on the flyjQuery - 动态创建隐藏的表单元素
【发布时间】：2011-01-25 08:50:27
【问题描述】：

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

【问题讨论】：

标签： javascript jquery forms hidden-field

【解决方案1】：

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

【讨论】：

有人在旧 IE 上测试过这个答案吗？
就个人而言，我认为这是一种比公认的答案更好的方法，因为它涉及更少的 DOM 操作/函数调用。
@PaulSkinner 对于给定的情况，是的，您是正确的，但并非总是如此。看看这里stackoverflow.com/a/2690367/1067465

【解决方案2】：

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

回答你的第二个问题：

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

【讨论】：

请注意，如果您在创建后尝试更改输入类型，IE 会阻塞。使用$('<input type="hidden">').foo(...) 作为解决方法。
此外，jQuery 文档建议，由于 DOM 操作很昂贵，如果要添加多个输入，请使用类似 $(this).append(hidden_element_array.join('' ));
我刚刚用 jQuery 1.6.2 尝试了这个方法，并在 Firefox 7.0.1 中收到了这个错误：“未捕获的异常：无法更改类型属性”看来你不能使用 attr 方法在这些条件下更改类型属性。我现在正在尝试下面的方法...
这种方法是否适用于较新 API 版本中较新的 .prop 函数？
@SpaceBison .prop 并不是很多人认为的“新的.attr”。您仍然应该使用.attr 来设置属性。

【解决方案3】：

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

$('<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。
第二个代码，似乎“id”需要动态生成，比如 foo1、foo2 等

【解决方案4】：

工作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在这里

【讨论】：

【解决方案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');

【讨论】：

'name-as-seen-at-the-server' 是什么？

【解决方案6】：

和大卫的一样，但是没有attr()

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

【讨论】：

这种填充标签的方式有名称吗？
如何只追加输入1次？如果存在，它会继续输入具有相同属性的新值
非常精简，我喜欢它。