为什么JS动态生成的input标签在后台有时候没法获取到
最近在做一个产品添加的功能，需求有点奇葩，所以在添加的时候免不了要用到动态生成控件，然后我就使用了JS去动态生成一些 checkbox类型的input标签，在以前用asp.net在后台生成的input标签都可以用request["name属性"]这样的方式在后台 获取，但是在获取JS生成的标签时，就会发生有时候可以获取到，有时候又获取不到，到现在才发现，原来是我的JS写法有问题，所以才导致这样的问题。之前 这样的问题也遇到过好几次，苦于没找到解决方法，之前都是换别的方法去完成的，如今再次遇到，倒也觉得还是想办法解决的好，下面贴出代码
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <script type="text/javascript"> function InsertProduct() { for (var i = 0; i < 5; i++) { var tb = document.getElementById("productTable"); var refRow = tb.rows.length - 1; var newRefRow = tb.insertRow(refRow); var checkboxid = document.createElement("input"); checkboxid.setAttribute("type", "checkbox"); checkboxid.setAttribute("id", "checkboxid"); checkboxid.setAttribute("name", "chkallID"); checkboxid.setAttribute("value", i.toString() + "InsertProduct"); newRefRow.insertCell(0).appendChild(checkboxid); newRefRow.insertCell(1).innerHTML = "<span class=\"color4\">" + document.getElementById("t_name").value + "</span>"; newRefRow.insertCell(2).innerHTML = document.getElementById("t_gkj").value; newRefRow.insertCell(3).innerHTML = document.getElementById("t_sl").value; newRefRow.insertCell(4).innerHTML = document.getElementById("t_zk").value; newRefRow.insertCell(5).innerHTML = document.getElementById("t_zhj").value; newRefRow.insertCell(6).innerHTML = document.getElementById("t_xj").value; } } function Addrows() { for (var i = 0; i < 5; i++) { var tb = document.getElementById("tableadd"); var refRow = tb.rows.length - 1; var newRefRow = tb.insertRow(refRow); newRefRow.insertCell(0).innerHTML = "<input type=\"checkbox\" id=\"chkold\" name=\"chkold \" value=\"" + i + "addrows\" />"; newRefRow.insertCell(1).innerHTML = "<span class=\"color4\">" + document.getElementById("t_name1").value + "</span>"; newRefRow.insertCell(2).innerHTML = document.getElementById("t_gkj1").value; newRefRow.insertCell(3).innerHTML = document.getElementById("t_sl1").value; newRefRow.insertCell(4).innerHTML = document.getElementById("t_zk1").value; newRefRow.insertCell(5).innerHTML = document.getElementById("t_zhj1").value; newRefRow.insertCell(6).innerHTML = document.getElementById("t_xj1").value; } } </script> <h1>方案一</h1> <table width="100%" id="productTable"> <tr> <td class="title-bg"> 选择 </td> <td class="title-bg"> 产品名称 </td> <td class="title-bg"> 公开价 </td> <td class="title-bg"> 数量 </td> <td class="title-bg"> 折扣（X/10） </td> <td class="title-bg"> 折后价 </td> <td class="title-bg"> 小计 </td> </tr> <tr> <td> <a class="clickcss" onclick="InsertProduct()">添加</a> </td> <td> <input type="text" id="t_name" name="" /> </td> <td> <input type="text" id="t_gkj" name="" value="0" /> </td> <td> <input type="text" id="t_sl" name="" value="0" /> </td> <td> <input type="text" id="t_zk" name="" value="10" /> </td> <td> <input type="text" id="t_zhj" name="" value="0" /> </td> <td> <input type="text" id="t_xj" name="" value="0" /> </td> </tr> </table> <asp:Button ID="Button1" runat="server" Text="接收方案一参数" onclick="Button1_Click" /> <br /> <h1>方案二</h1> <table width="100%" id="tableadd"> <tr> <td class="title-bg"> 选择 </td> <td class="title-bg"> 产品名称 </td> <td class="title-bg"> 公开价 </td> <td class="title-bg"> 数量 </td> <td class="title-bg"> 折扣（X/10） </td> <td class="title-bg"> 折后价 </td> <td class="title-bg"> 小计 </td> </tr> <tr> <td> <a class="clickcss" onclick="Addrows()">添加</a> </td> <td> <input type="text" id="t_name1" name="" /> </td> <td> <input type="text" id="t_gkj1" name="" value="0" /> </td> <td> <input type="text" id="t_sl1" name="" value="0" /> </td> <td> <input type="text" id="t_zk1" name="" value="10" /> </td> <td> <input type="text" id="t_zhj1" name="" value="0" /> </td> <td> <input type="text" id="t_xj1" name="" value="0" /> </td> </tr> </table> </div> <asp:Button ID="Button2" runat="server" Text="接收方案二参数" onclick="Button2_Click" /> </form> </body> </html>
后台代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } /// <summary> /// 接收方案一参数 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button1_Click(object sender, EventArgs e) { if (string.IsNullOrEmpty(Request["chkallID"]) == false) { Response.Write(Request["chkallID"].ToString()); Response.End(); } } /// <summary> /// 接收方案二参数 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button2_Click(object sender, EventArgs e) { if (string.IsNullOrEmpty(Request["chkold"]) == false) { Response.Write(Request["chkold"].ToString()); Response.End(); } } }
方案一的写法，生成checkbox类型的input后，在后台可以接收到选中的checkbox的value，接收的时候会自动的在每个checkbox的value后面加上,逗号隔开，
方案二的写法，在后台是无法获取到动态生成的checkbox类型的input，并且，如果直接获取，还会发生异常。
