关于JS动态生成input,后台获取值的问题
<script type="text/javascript">
function Creat() {
var textBoxId = document.createElement("input");
textBoxId.nodeType = "text";
textBoxId.nodeName = "textBoxId1";
document.getElementById("GoodsBox").appendChild(textBoxId);
}
</script>
<div>
<form action="Default2.aspx" method="post" id="GoodsBox">
<input type="submit" value="提交" />
</form>
<input type="button" onclick="Creat()" value="创建" />
</div>
很简单..点击创建按钮..调用Creat方法..
Creat方法就是生成一个input元素,type=text 也就是文本框,然后name=textBoxId1
然后再添加到form里面...
问题点击创建..文本框是出来了..但是提交后..Request.Form["textBoxId1"]竟然为null..这到底是为什么?
还有没有别的方法动态生成文本框,然后后台能获取值的 js
[解决办法]
textBoxId.setAttribute("type", "text");
textBoxId.setAttribute("name", "textBoxId1");
[解决办法]
好吧，我把完整的例子发一下。你参考一下。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function Creat() {
var textBoxId = document.createElement("input");
textBoxId.setAttribute("type", "text");
textBoxId.setAttribute("id", "textBoxId1");
document.getElementById("GoodsBox").appendChild(textBoxId);
}
function Test() {
document.getElementById("Hidden1").value = document.getElementById("textBoxId1").value;
document.getElementById("<%=HiddenField1.ClientID%>").value = document.getElementById("textBoxId1").value;
}
</script>
</head>
<body>
<div>
<form runat="server" id="GoodsBox">
<input type="submit" value="提交" />
<input type="button" onclick="Creat()" value="测试创建" />
<input type="button" onclick="Test()" value="测试获取值" />
<input id="Hidden1" name="Hidden1" type="hidden" value="" />
<asp:HiddenField ID="HiddenField1" runat="server" Value="" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</div>
</body>
</html>
WebForm1的Button1_Click事件。
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("<script> alert('" + HiddenField1.Value + "') </script>");
}
效果：
点测试创建，再点测试获取值，最后点Button。就可以弹出你在动态加的textbox中输入的文字了。