多个文本框重复的情况。比如说我们在做简历添写的情况下,比如工作经历,我们可以做成动态的,他工作了几个单位,就让他点按钮,自己来增加
webForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jxtDemoSMS.WebForm1" %>
<!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>
<mce:script language="javascript" type="text/javascript"><!--
//这里的max主要是限制一下最多可以加几个,如果不想限制可以不用
function addFile(max)
{
var Text1 = document.getElementsByName("Text1");
if (Text1.length == 1 && Text1[0].disabled == true)
{
Text1[0].disabled = false;
return;
}
if (Text1.length < max)
{
var fileButton = '<br />姓名:<input id="Text1" name="Text1" type="text" /> 性别:<input id="Text2" name="Text2" type="text" /> <select id="Select1" name="D1"><option value="中国">中国</option><option value="美国">美国</option><option value="日本">日本</option></select>';
//alert(fileButton);
document.getElementById("FileList").insertAdjacentHTML("beforeEnd",fileButton);
}
}
//这里的方法是采用了隐藏域的方法,把得到的信息放到隐藏域里,这里分了二个,一个是用来存input的一个是用来存select的
function getNames() {
var hdArea = document.getElementById("<%=hdNames.ClientID %>");
var hdArea2 = document.getElementById("<%=SelectName.ClientID %>");
var controlArea = document.getElementById("FileList");
var list = controlArea.getElementsByTagName("input");
var nameStr = "";
for (var i = 0; i < list.length; i++) {
nameStr += list[i].value;
nameStr += "|";
}
var list2 = controlArea.getElementsByTagName("select");
var nameStr2 = "";
for (var i = 0; i < list2.length; i++) {
nameStr2 += list2[i].value;
nameStr2 += "|";
}
hdArea.value = nameStr.substr(0, nameStr.length - 1);
hdArea2.value = nameStr2.substr(0, nameStr2.length - 1);
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<p id="FileList">
姓名:<input id="Text1" name="Text1" type="text" /> 性别:<input id="Text2" name="Text2" type="text" />
<select id="Select1" name="D1">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select></p>
<input id="Button2" type="button" value="添加" onclick="addFile(4)" /><asp:HiddenField
ID="SelectName" runat="server" />
<asp:HiddenField ID="hdNames" runat="server" />
<br><br><asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" OnClientClick="getNames()" />
</form>
</body>
</html>
<!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>
<mce:script language="javascript" type="text/javascript"><!--
//这里的max主要是限制一下最多可以加几个,如果不想限制可以不用
function addFile(max)
{
var Text1 = document.getElementsByName("Text1");
if (Text1.length == 1 && Text1[0].disabled == true)
{
Text1[0].disabled = false;
return;
}
if (Text1.length < max)
{
var fileButton = '<br />姓名:<input id="Text1" name="Text1" type="text" /> 性别:<input id="Text2" name="Text2" type="text" /> <select id="Select1" name="D1"><option value="中国">中国</option><option value="美国">美国</option><option value="日本">日本</option></select>';
//alert(fileButton);
document.getElementById("FileList").insertAdjacentHTML("beforeEnd",fileButton);
}
}
//这里的方法是采用了隐藏域的方法,把得到的信息放到隐藏域里,这里分了二个,一个是用来存input的一个是用来存select的
function getNames() {
var hdArea = document.getElementById("<%=hdNames.ClientID %>");
var hdArea2 = document.getElementById("<%=SelectName.ClientID %>");
var controlArea = document.getElementById("FileList");
var list = controlArea.getElementsByTagName("input");
var nameStr = "";
for (var i = 0; i < list.length; i++) {
nameStr += list[i].value;
nameStr += "|";
}
var list2 = controlArea.getElementsByTagName("select");
var nameStr2 = "";
for (var i = 0; i < list2.length; i++) {
nameStr2 += list2[i].value;
nameStr2 += "|";
}
hdArea.value = nameStr.substr(0, nameStr.length - 1);
hdArea2.value = nameStr2.substr(0, nameStr2.length - 1);
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<p id="FileList">
姓名:<input id="Text1" name="Text1" type="text" /> 性别:<input id="Text2" name="Text2" type="text" />
<select id="Select1" name="D1">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select></p>
<input id="Button2" type="button" value="添加" onclick="addFile(4)" /><asp:HiddenField
ID="SelectName" runat="server" />
<asp:HiddenField ID="hdNames" runat="server" />
<br><br><asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" OnClientClick="getNames()" />
</form>
</body>
</html>
webForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace jxtDemoSMS
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
protected void Button1_Click(object sender, EventArgs e)
{
//这里要说一下,因为我们取得的值是这样的。1|2|3|4这样的值,所以你要根据你一共有多少控件来算哪几个是一组数据
//然后进行分组存储
Response.Write(this.hdNames.Value + "<br>");
Response.Write(this.SelectName.Value);
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace jxtDemoSMS
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
protected void Button1_Click(object sender, EventArgs e)
{
//这里要说一下,因为我们取得的值是这样的。1|2|3|4这样的值,所以你要根据你一共有多少控件来算哪几个是一组数据
//然后进行分组存储
Response.Write(this.hdNames.Value + "<br>");
Response.Write(this.SelectName.Value);
}
}
}