为什么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,并且,如果直接获取,还会发生异常。

为什么JS动态生成的input标签在后台有时候没法获取到,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。