使用jquery动态增加删除input框

最新推荐文章于 2023-04-12 22:12:06 发布
最新推荐文章于 2023-04-12 22:12:06 发布
阅读量1.9k 收藏 2
点赞数
文章标签： jquery css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianchenn/article/details/105730305
版权

使用jquery增加删除input元素
将input输入内容加上限制
οninput=“value=value.replace(/[^\d|xX]/g,’’)”
身份证格式验证
或者
$(’#card’).attr(“oninput”, “this.value=this.value.replace(/[^0-9|xX]/g,’’);”);
id为card的input框输入限制为this.value=this.value.replace(/[^0-9|xX]/g,’’)
两种结果是一样的

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul li{
				display:block;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				var t = $("#num");
				$("#max").click(function() {
					t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
					if(t.val() <= 5) {
						$('#main').find('ul').append("<li><p>姓名" + t.val() + "：<input type='text' name='order_name[]' autocomplete='off'  required/></p><p>身份证" + t.val() + "：<input type='text' id='card'  maxlength='18' name='order_card[]' autocomplete='off' required/><p/></li>");
						$('#card').attr("oninput", "this.value=this.value.replace(/[^0-9|xX]/g,'');");
					}
					if(t.val() > 5) {
						t.val(parseInt(t.val()) - 1); //最小值为1
					}
				});
				$("#min").click(function() {
					t.val(parseInt(t.val()) - 1); //点击减号输入框数值减1
					$("#main li").last().remove();
					if(t.val() <= 0) {
						t.val(parseInt(t.val()) + 1); //最小值为1
					}
				});
			});
		</script>
	</head>

	<body>
		<p>数量：
			<input style="width:40px;" id="min" type="button" value="-" />
			<input style="width:40px;" id="num" name="num" type="text" value="1" autocomplete="off" readOnly/>
			<input style="width:40px;" id="max" type="button" value="+" />
		</p>
		<div>
			<p>姓名1：<input type="text" name="order_name[]" autocomplete="off" required/></p>
			<p>身份证1：<input type="text" name="order_card[]" maxlength='18' oninput="value=value.replace(/[^\d|xX]/g,'')" autocomplete="off" required/>
				<p/>
				<div id="main">
					<ul></ul>
				</div>
		</div>
	</body>

</html>

通过点击增加按钮来增加一组input框
点击删除按钮来删除一组input框
这里设置的最少一个，最多五个
根据需求来进行修改

效果图就不放了 大家复制代码自行修改吧

jianchenn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现动态添加和删除input框代码实例
10-17
主要介绍了jQuery实现动态添加和删除input框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jquery实现输入框动态增减
weixin_34320724的博客
09-24 210
2019独角兽企业重金招聘Python工程师标准>>> ...
html中input动态添加和删除,jQuery实现动态添加和删除input框代码实例
weixin_29574585的博客
06-09 968
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码，供大家参考，具体内容如下选项$(function(){// 添加选项$("#opbtn").click(function(){if($("#opts>li").size() < 6){// 最多添加6个选项$("#opts").append("");}else{// 提示选项个数已经达到最大$("#optips"...
jQuery之动态为表格添加数据
热门推荐
a1k2l45k的博客
05-19 2万+
项目需求 需要一个页面，包括一张表格，一个button(id=”button1”) button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色 显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面 的表格中 显示框中需要包括一个div,其点击事件是关闭显示框 步骤 HTML结构和CSS美化 ...
jquery实现动态生成和删除输入框
mosphera的专栏
08-04 1066
jquery实现动态生成和删除输入框因为项目里要使用到动态生成和删除输入框并且不保留原参数的方式，所以不能用hidden直接隐藏(公司使用的框架不允许form里有多余值)，因此自己做了一个动态生成和删除输入框的小例子，添加输入框时会保存原来输入框里的值，删除输入框时也会将值删除掉。 以下就是代码片： <html> <head> <title>onunload test</title> </head>
jQuery实现动态添加、删除按钮及input输入框的方法
10-19
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
Jquery动态添加input和删除input
huaxia430的博客
11-07 1221
需求：输入多个游戏名称和游戏链接 实现：jquery 的append（）和remove()方法
jQuery的基础操作（二）
qq_45799465的博客
02-22 518
一、jQuery事件绑定语法 jQuery伪数组支持的语法形式 $().事件类型(事件处理函数) jQuery伪数组不支持的语法形式 $().on( 事件类型 , 事件处理函数 ) 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&.
jquery实现input元素组添加和删除
xurongxin2006的博客
04-12 557
写了好几次这样的方法，每次都是从头开始写，现在觉得很常用，记录下来。逐渐的完善后，希望能给其他人提供方便！
jQuery动态添加input框
qq_39503366的博客
07-27 1万+
bootstrap和jQuery实现 实现效果如下： 点击加号进行添加，点击减号删除行，鄙人前端技术不太好，头铁写的 HTML代码如下： <div id="index-div"> </div> HTML代码其实就是个div盒子，也可以给一个初始化的文本框 重头是js的代码： 进入页面： $(function () { var...
jQuery实现动态添加和删除input框实例代码
01-21
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>选项</title> ...
jquery添加和删除input框
tony_stark的博客
10-19 335
代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" conte...
jquery动态添加删除input输入框
ccyy
02-24 1418
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>添加和删除文本框-蚂蚁部落</title> <style type="text/css"> ul{ list-style:none } <
jquery 动态添加、按顺序添加input文本框并且实现删除操作
年华
11-01 1万+
1.先来一张图来告诉我们今天要实现什么 蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“  点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉图片”“ 2.首先 “发明人1姓名” 和 ”发明人1排名“是html要有的，然后点击加号按钮才会动态添加 贴出html 代码 [html] view plai
jQuery实现动态添加和删除input框
有点儿文绉绉的小赖的博客
07-26 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;选项&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.8.3.js"&gt
JQuery点击按钮新增input框
小伙伴们全都Lucky！
09-02 2487
1.正常状态 2.点击添加 3. 点击添加的input框后面的添加按钮 4.点击按钮刷新规则下方表格会弹出各个排列组合，价格可以修改 5.上代码 <div class="videobox" style="margin-left:-12px;"> <label class="layui-form-label" style="width: 90px;">商品规格</label> ...
jQuery点击按钮，生成input输入框
祈澈菇凉
04-06 4851
需求，点击添加按钮，生成input输入框，如果上一个输入框为空，则弹出提示框提示，若不为空，则生成一行input框。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl...
Jquery动态添加输入框
weixin_34062329的博客
09-28 2258
jquery 动态添加输入框的两种方法。 1.展示页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=...
jq 增加html表单,JQ中动态增加form以及参数提交的问题
weixin_29215391的博客
06-19 638
form的html结构`拍摄点名称经度纬度代表性照片四方位照片:东四方位照片:北四方位照片:西四方位照片:南全景照片`点击新增按钮的时候 下面的表单以及字段会新增一套问题1.使用append的话是在 div class panel-body 下append一个新的form呢 还是在form下 apeend 各个input呢新增的时候 input元素的 name value 需要加索引吗2.因为...
动态的添加文件上传框，并实现遍历和删除功能
最新发布
05-26
可以使用 HTML、JavaScript 和 jQuery 实现动态添加文件上传框，并实现遍历和删除功能。 首先，在 HTML 页面中创建一个上传文件的表单，包含一个添加按钮和一个容器用于显示上传文件框： ```html <form id="fileUploadForm"> <div id="uploadContainer"> <input type="file" name="file[]" class="fileInput" /> </div> <button type="button" id="addFileButton">添加文件</button> <button type="submit">上传</button> </form> ``` 然后，在 JavaScript 中使用 jQuery 实现添加文件上传框的功能： ```javascript $(document).ready(function() { $("#addFileButton").click(function() { var newUploadField = $("<input>", { type: "file", name: "file[]", class: "fileInput" }); $("#uploadContainer").append(newUploadField); }); }); ``` 这将在点击添加按钮时，在上传文件容器中添加一个新的上传文件框。 接下来，实现遍历和删除功能。可以使用以下代码遍历和删除上传的文件： ```javascript $(document).ready(function() { // 添加文件上传框 $("#addFileButton").click(function() { var newUploadField = $("<input>", { type: "file", name: "file[]", class: "fileInput" }); $("#uploadContainer").append(newUploadField); }); // 删除文件上传框 $(document).on("click", ".deleteFileButton", function() { $(this).parent().remove(); }); // 提交文件上传表单 $("#fileUploadForm").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ url: "upload.php", type: "POST", data: formData, contentType: false, processData: false, success: function(response) { console.log(response); } }); }); }); ``` 在这段代码中，当用户单击上传文件表单的提交按钮时，它将使用 jQuery 的 AJAX 功能将表单数据异步发送到服务器。 在服务器端，可以使用 PHP 处理上传的文件并将其保存到服务器上： ```php <?php if ($_FILES) { $fileCount = count($_FILES["file"]["name"]); for ($i = 0; $i < $fileCount; $i++) { $tempFile = $_FILES["file"]["tmp_name"][$i]; $targetPath = "uploads/" . $_FILES["file"]["name"][$i]; move_uploaded_file($tempFile, $targetPath); } echo "上传成功！"; } ?> ``` 这将遍历所有上传的文件，并将它们保存到服务器上的 uploads 文件夹中。 最后，需要在 HTML 页面中添加一个删除按钮，以便用户可以删除上传的文件： ```html <div class="uploadFile"> <input type="file" name="file[]" class="fileInput" /> <button type="button" class="deleteFileButton">删除</button> </div> ``` 这将为每个上传的文件创建一个删除按钮。当用户单击删除按钮时，它将从上传文件容器中删除相应的上传文件框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值