最近在做一个产品添加的功能，需求有点奇葩，所以在添加的时候免不了要用到动态生成控件，然后我就使用了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标签在后台有时候没法获取到的更多相关文章

  1. js动态新增组合Input标签

    var x = 1; function addlink() { var linkdiv = document.getElementById("add1_0"); if (linkd ...

  2. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  3. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  4. js动态生成canvas

    最近看代码发现一个小现象,就是用js动态生成的canvas在浏览器审查元素的时候,发现它没有结束标签,但是不会影响canvas上图形的绘制,同时还有一点就是在动态设置canvas宽度和高度的时候,不要 ...

  5. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  6. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  7. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  8. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  9. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

随机推荐

  1. Three ways to do WCF instance management

    Three ways to do WCF instance management (Per call, Per session, and Single). IntroductionVery often ...

  2. 学以致用:让visualstudio爱上sublime

    前言: 经常在vs中工作,但是一些编辑工作却非常喜欢sublime的方式,如果你也是,那我们来当媒婆吧,哈哈. 准备:       Visualstudio一枚        Sublime一枚   ...

  3. Node v4.1.1

    Installing Node.js via package manager curl --silent --location https://deb.nodesource.com/setup_4.x ...

  4. IE浏览器Ajax缓存问题小结

    IE浏览器Ajax缓存问题 在IE下使用ajax的get方法向后台请求数据时,如果请求URL与之前完全一样,则根本不想后台获取,直接返回上一次请求缓存的数据(在缓存过期之前,针对相同地址发起的多个Aj ...

  5. List<object>排序 z

    一般我們在撰寫程式時,很常會使用到List<>來裝取自定義的類別陣列,跟一般的陣列插在哪呢?!好處是什麼?!好處就是一般的陣列需要先 宣告長度,而List<>不用,所以在資料個 ...

  6. Oracle 行拼接 wmsys.wm_concat扩展

    将多行数据拼接成一行: --wmsys.wm_concat group by a.flowid; 但有大小限制:字符串缓冲区太小,超过varchar 4000长度.扩展:更改返回类型为clob --T ...

  7. JVM 的 工作原理，层次结构 以及 GC工作原理

    JVM Java 虚拟机 Java 虚拟机(Java virtual machine,JVM)是运行 Java 程序必不可少的机制.JVM实现了Java语言最重要的特征:即平台无关性.原理:编译后的 ...

  8. 把谷歌等webkit内核浏览器变为输入文本编辑器的方法

    只需要在地址栏输入 data:text/html, <html contenteditable> 回车后即可看到效果

  9. NavBarControl 左侧菜单

    (1)示例图片 具体实现: 一. using DevExpress.XtraNavBar; 二. 从窗体上拖一个 NavBarControl 控件 命名为:nbcLeft 三.窗体OnLoad 事件 ...

  10. 分享一个dapper简单封装

    using System;using System.Data.Common;using System.Linq;using Dapper;using MySql.Data.MySqlClient; p ...