JQuery以编程方式添加隐藏元素以形成答案

【问题标题】：JQuery add hidden element to form programmaticallyJQuery以编程方式添加隐藏元素以形成
【发布时间】：2011-02-05 18:30:45
【问题描述】：

这真的很吸引我。我有一个在页面加载时加载的表单。在我的 jquery 中 'ready' 函数我像这样在该表单上附加一个隐藏的：

$("<input id='thehidden' type='hidden' name='thehidden' value='hiddenval'>").appendTo("#MenuForm")

当我使用 firebug 检查表单内容时，我可以看到元素已添加。

["$(\"#MenuForm\").children()"] is [div, input#thehidden hiddenval]

到目前为止一切顺利。当我提交此表单并尝试再次阅读元素时，我无法获得我添加的新隐藏 val 的值。

alert($('#thehidden').val())

未定义

任何帮助将不胜感激

【问题讨论】：

不知道这与它有什么关系（它甚至可能是您的帖子中的错字）但您需要确保在元素创建期间正确关闭标签：$("<input id='thehidden' type='hidden' name='thehidden' value='hiddenval' />") - 你离开你的结束斜线。
@prodigitalson 谢谢，但没有区别
也...您是否在$('#thehidden') 的返回中得到未定义，还是仅在$('#thehidden').val() 的返回中得到未定义？

标签： javascript jquery

【解决方案1】：

您究竟是什么时候尝试从#thehidden div 读取值？当按下提交按钮或提交后页面重新加载时？如果您不是在每次页面加载时都创建输入，那么下一个页面加载时就不会出现。

我仅通过创建输入并在警报中读取值来测试您的代码，它对我来说很好用。 Check it out 为你自己。

【讨论】：

【解决方案2】：

试试

$('#someid').append($('<input></input>').attr('id','hidden1').attr('type','hidden').attr('value','some val'));

【讨论】：

【解决方案3】：

您可以创建一个 jQuery 函数来为您完成大部分工作。我使用此函数以编程方式添加隐藏输入：

jQuery函数：

// This must be applied to a form (or an object inside a form).
jQuery.fn.addHidden = function (name, value) {
    return this.each(function () {
        var input = {};
        if (Object.prototype.toString.call(value) === '[object Array]') {
            var r = /\[\]/;
            // Pass an array as a series of separate hidden fields.
            for (var i = 0; i < value.length; i++) {
                input = $("<input>").attr("type", "hidden")
                                    .attr("name", name.replace(r, '[' + i + ']'))
                                    .val(value[i]);
                $(this).append($(input));
            }
        } else {
            input = $("<input>").attr("type", "hidden")
                                .attr("name", name)
                                .val(value);
            $(this).append($(input));
        }
    });
};

用法：

对于标准表单项或MVC中的简单参数theHidden as String：

$('#myform').addHidden('theHidden', 'jam');
=> <input type="hidden" name="theHidden" value="jam">

对于 MVC ID As List(Of Integer) 中的列表参数：

$('#myform').addHidden('ID', [1,2,5]);
=> <input type="hidden" name="ID" value="1">
   <input type="hidden" name="ID" value="2">
   <input type="hidden" name="ID" value="4">

对于 MVC 中具有 List 属性 model As ComplexType 的复杂类型：

$('#myform').addHidden('Customer[].CustomerID', [1,2,5]);
=> <input type="hidden" name="Customer[0].CustomerID" value="1">
   <input type="hidden" name="Customer[1].CustomerID" value="2">
   <input type="hidden" name="Customer[2].CustomerID" value="5">

Class ComplexType
    Property Customer As List(Of CustomerDetail)
End Class
Class CustomerDetail
    Property CustomerID As Integer
End Class

【讨论】：

【解决方案4】：

您需要将输入元素插入到 DOM 中，而不仅仅是将 HTML 插入到页面中。对于表单字段，情况有所不同。

使用var field = $(document.createElement('input'))，然后设置字段的属性。

【讨论】：

但是 jQuery 的 appendTo() 确实执行了 DOM 插入。使用示例代码，我能够成功检索插入的input 的值。