隐藏元素javascript中的数组答案

【问题标题】：array inside hidden element javascript隐藏元素javascript中的数组
【发布时间】：2013-09-12 09:57:08
【问题描述】：

我是一个绝对的 javascript 菜鸟，并且正在使用 ASP.net，在我的 aspx.cs 文件后面的代码中，我使用 html 标记声明了 Web 文档的主体，如下所示...

public void CreateForm(string passengerType, int passengerCount)
    {
        for (int i = 1; i <= passengerCount; i++)
        {
            Response.Write("<table id=NameBirthTable" + passengerType + i + ">");
            Response.Write("<tr>"); 
               ...
            Response.Write("<td colspan=2><input id=MiddleName" + passengerType +i                + "type=text /></td>");
                ...
        }
    }

当我尝试调用一个元素的 ID 时，它位于 id="MiddleName[passengerType][i]" 我找不到它，我需要获取该文本框的值并将其传递到另一个页面，有人建议我使用 javascript 并尝试将这些元素存储在隐藏元素中并将其添加到在 javascript 中声明的数组，我没有得到他所说的任何内容，还有其他建议吗？

【问题讨论】：

给出通用类名。然后点击获取相应点击元素的ID。将其保存在隐藏字段中，然后通过后面的代码访问..
@Daniel：问题：当你说“我找不到它，我需要获取该文本框的值并将其传递到另一个页面”时，你是尝试在客户端（即 javascript）或服务器端（即 c#）执行此操作？
请检查您的passengerType 值中是否包含空格字符？如果是这样，那么它不会创建正确的 id。如果是这种情况，那么您可以尝试通过执行passengerType=passengerType.replace(' ', '_') 将空格字符（即“”）替换为 say undescore（即“_”）
@purnil，我想在客户端（使用 javascript）和服务器端都这样做，
另外，我确保传递给乘客类型的值实际上不涉及空格，它们应该只是“成人”、“儿童”、“婴儿”

标签： c# javascript html asp.net

【解决方案1】：

也许：

Response.Write("<td colspan=2><input id='MiddleName" + passengerType + i + "' type=text /></td>");

【讨论】：

【解决方案2】：

如果您在页面上查看源代码，您可能会看到：

<td colspan=2><input id=MiddleNameXYZ1>
<td colspan=2><input id=MiddleNameXYZ2>
<td colspan=2><input id=MiddleNameXYZ3>

换句话说，您的编码没有按照您认为的格式进行格式化。

【讨论】：

这正是我想做的，这是否意味着我不能通过简单地使用javascript代码来调用该元素的值
您希望格式看起来像：id="MiddleName[passengerType][i]" 对吗？
是的，谢谢你的指正，我之前不太明白你的答案，我现在正在尝试

【解决方案3】：

检查生成文档的来源，查看生成的 id 作为代码的输出。请记住，asp.net 控件使用不同的 id 呈现，然后是服务器端 ID。要在您的 javascript 函数中获取它，您需要执行以下操作：

function getElement(){
    var myEl = document.getElementByID('<%=ControlID.ClientID%>')
}

ControlID 是您控制的服务器端 ID。

在您的特定情况下，ControlID 可能不可用，因此可能需要在页面类中创建一个包含您添加的控件的属性 - 例如：

class MyPage:Page{
    TextBox TextBoxName {get;set;}

    public void CreateForm(string passengerType, int passengerCount)
    {
        TextBoxName = new TextBox();
        this.Controls.Add(TextBoxName);
    }

}

我知道此代码可能与您当前的实现不匹配，但通常它应该以这种方式工作。

【讨论】：

该问题使用普通的 html 元素 id 而不是 asp.net 控件。所以渲染时不会改变。而且这些不是控件，只是字符串，所以你不能为它们做<%=ControlID.ClientID%>。
试过了，导致 id 无效，我开始认为我需要从头开始，因为我被一位高级程序员告知这不是一个好习惯，我会只是尝试创建服务器端控件而不是使用 html 标签，感谢所有帮助我的人
问题中提到了 @Purnil Soni Textbox，所以我认为它可能已在代码中稍后添加，尤其是他没有显示任何 '

【解决方案4】：

下面试试

public void CreateForm(string passengerType, int passengerCount)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("<table id='NameBirthTable" + passengerType  + "'>");
    for (int i = 1; i <= passengerCount; i++)
    {
        sb.AppendLine("<tr>");
        sb.AppendLine("<td colspan='2'><input id='MiddleName" + passengerType + i + "' type='text' /></td>");
    }
    sb.AppendLine("</table>");
    Response.Write(sb.ToString());
}

【讨论】：

这与问题所说的相同，只是实现方式不同。这对答案/解决方案有何帮助？
@PurnilSoni 它不仅介绍了字符串生成器，还检查了我在循环之前移动了表标签并在循环之后添加了结束表标签。并为所有属性添加了''。

【解决方案5】：

在服务器端，您可以创建所有已创建 ID 的列表，并将它们作为值输出到隐藏字段。

public void CreateForm(string passengerType, int passengerCount)
{
    /* List to hold id values */
    List<string> ids = new List<string>();

    for (int i = 1; i <= passengerCount; i++)
    {
        Response.Write("<table id=NameBirthTable" + passengerType + i + ">");
        Response.Write("<tr>"); 
        //   ...
        Response.Write("<td colspan=2><input id=MiddleName" + passengerType +i+ "type=text /></td>");
        //    ...

        /* Add newly created input id to list */
        ids.Add("MiddleName" + passengerType +i);
    }

    /* Output the ids collection to hidden field value */
    Response.Write("<input type='hidden' id='hiddenElement' value='" + string.Join(",", ids.ToArray()) + "'></input>");
}

在客户端 javascript，您可以从隐藏元素中获取所有这些 id，遍历它们并获取所有创建的输入元素

/* Get all ids from hidden element */
var ids = document.getElementById('hiddenElement').value.split(',');
/* Loop through all ids */
for (var i = 0; i < ids.length; i++) {
    var element = document.getElementById(ids[0]);
    // do something
}

【讨论】：