如何从动态添加（使用 javascript）元素中获取值？

Posted 2023-02-24

【中文标题】如何从动态添加（使用 javascript）元素中获取值？

【英文标题】：How to get values from dynamically added (using javascript) elements?

【发布时间】：2011-08-09 18:21:34

【问题描述】：

在我的 aspx 页面上，我使用 javascript 在客户端动态创建 html 控件。例如，页面加载后，您可以在浏览器中单击按钮，通过单击按钮 html input 和 select 元素出现。您可以再次单击，此元素（input 和 select）将再次添加。因此，您可以根据需要创建如此多的输入和选择（所有这些都使用 javascript，没有回发）

用户创建一些输入并选择并在其中输入一些信息后，他发布了表单。我希望在服务器端找到所有这些动态添加的元素并根据此控件中的值执行一些操作。

我怎样才能找到动态添加的元素，实现这一点的最佳和优雅的方法是什么？

提前致谢。

【问题讨论】：

您是在同一页面上发帖，还是在另一个页面上发帖？发布表单后您的控件是否仍然存在？

我发到同一个页面，发回后我的控件必须还在页面上

【参考方案1】：

在创建新元素的 Javascript 中，每次创建元素时递增一个计数器。将计数器的值添加到输入元素的名称中，以便每个元素都有一个唯一的名称。

在提交表单时将计数器的最终值添加到隐藏的表单域。

在您的服务器端代码中，创建一个从零开始并一直持续到达到计数器值的循环。在循环中，获取相应表单字段的发布值。

【参考方案2】：

添加元素时，为它们分配唯一 ID，然后使用 Request.Form["UniqueIdHere"] (C#) 或 Request.Form("UniqueIdHere") (VB.NET) 检索它们的值。

【参考方案3】：

创建一个循环遍历每个input 和select 对象，获取当前对象的名称/ID 及其对应的值。然后将这些项目添加到一个数组中，一旦循环完成，将这些值传递给您的 aspx 文件。

您可以在http://jsfiddle.net/euHeX/ 上查看使用此方法的示例。它目前只是提醒值，但您可以轻松修改它以通过 ajax 将值作为参数传递给您的处理程序 aspx 文件。该代码将根据提供的输入添加新输入或选择框。这当然会被修改以反映您当前的设置。

HTML：

<div id="dynamic"></div>
<input type="button" id="submit-form" value="Submit>>">

JavaScript（使用 jQuery）：

function createInput(type)
    for(var i=0; i<5; i++)
        if(type==0)
            var obj = '<input type="text" id="'+i+'" class="dynamicContent">';
        else if(type==1)
            var obj = '<select id="'+i+'" class="dynamicContent"><option>--Select--</option></select>';
        
        $("#dynamic").append(obj);
    


function getContent()
    var inputArray = [];
    $(".dynamicContent").each(function(k,v)
        var o = $(this);
        var oType;
        if(o.is("input")) oType = "input"; 
        if(o.is("select")) oType = "select";         
        var oID = oType+o.attr("id");
        var oValue = o.val();
        inputArray.push(oID+'='+oValue);
    );
    alert(inputArray);


$("#submit-form").click(function()
    getContent();    
);

// Set type to 0 for input or 1 for select
var type = '1';
createInput(type);

【参考方案4】：

如果您使用的是 jQuery，您可以使用 .live() 来实现这一点，就像小菜一碟！ http://api.jquery.com/live/

【参考方案5】：

我不知道您的控件是否会像您创建它们的方式那样在回发后继续存在，但是访问动态生成的控件（假设您已经知道如何持久化它们）的一种好方法是执行类似的操作以下：

将面板添加到您的页面。将您动态创建的控件添加到此面板。

在 OnClick 事件处理程序（或其他方法）中，执行以下操作：

foreach (DropDownList ddl in Panel1.Controls.OfType<DropDownList>())

    //put code here


foreach (TextBox txt in Panel1.Controls.OfType<TextBox>())

   //put code here