多个文本框重复的情况。比如说我们在做简历添写的情况下,比如工作经历,我们可以做成动态的,他工作了几个单位,就让他点按钮,自己来增加
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);
}
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端