jQuery点击按钮，生成或者删除inpu数组输入框

最新推荐文章于 2023-04-17 11:09:01 发布

我想要一杯现磨咖啡

最新推荐文章于 2023-04-17 11:09:01 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/weixin_40902244/article/details/90609331

版权

需求点击添加按钮，生成input数组输入框，如果上一个输入框为空，则弹出提示框提示，若不为空，则生成一行input框，最后一个不可以删除，对于数组传值要注意，id唯一，获取值的时候要注意空值的判断，把数组转为对象便于后台接收，但是后台接收对象需要添加注解@RequestBody。

<!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
		<style type="text/css">
			.row {
				margin-left: 200px;
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<tr>
				<th>建议联系人</th>
				<td colspan="5" class="text-left">
					<div id="addman">
						<div class="contact_row">
							<input type="text" name="linkname" maxlength="20" placeholder="请输入姓名" />
							<input type="text" name="phone" placeholder="请输入联系电话" maxlength='11' />
							<input type="text" name="address" maxlength="100" placeholder="请输入地址" />
						</div>
					</div>
					<input class="btn_upload" type="button" onclick="add()" value="添加建议联系人">
				</td>
			</tr>
		</div>
		<script type="text/javascript">
			function pSubmit() {
				var linkmanArr = [];
				var linkmanContractDiv = document.getElementById('addman');
				var linkmanContracts = linkmanContractDiv.getElementsByTagName('div');
				for(var j = 0, len = linkmanContracts.length; j < len; j++) {
					var inputs = linkmanContracts[j].getElementsByTagName('input');
					var linkname = inputs[0].value;
					if(linkname == '') {
						linkname = null;
					}
					var phone = inputs[1].value;
					if(phone == '') {
						phone = null;
					}
					var address = inputs[2].value;
					if(address == '') {
						address = null;
					}
					var linkmanEle = {
						'linkname': '',
						'phone': '',
						'address': ''
					};
					if(linkname != null || phone != null || address != null) {
						linkmanEle.linkname = linkname;
						linkmanEle.phone = phone;
						linkmanEle.address = address;
						linkmanArr.push(linkmanEle);
					}

				}

				var linkman = linkmanArr;

				var projectObj = {
					linkmans: linkman
				};

				$("#pForm_submit").attr("disabled", true)
				$.ajax({
					type: "POST",
					async: false,
					url: "<c:url value='/bzrdweb/project/doSubmitProject'/>",
					data: JSON.stringify(projectObj),
					dataType: "json",
					contentType: "application/json",
					success: function(data) {
						if(data.status == 1) {
							$("#pForm_submit").attr("disabled", false)
							alert("提交成功！");
							window.location.href = "${ctx}/bzrdweb/projectalready/alreadylist?proBillorsug=1";
						} else {
							$("#pForm_submit").attr("disabled", false)
							toastr.error("提交失败!");
						}
					},
					error: function(e) {
						$("#projectForm_submit").attr("disabled", false)
						toastr.error("提交失败!<br/>原因：请求出错了!");
					}
				});
			}
		</script>
		<script type="text/javascript">
			//新增联系人
			var temp = 0;

			function add() {
				var linkname = $(" input[ name='linkname' ] ").val();
				var phone = $(" input[ name='phone' ] ").val();
				if(phone == "" || linkname == "") {
					alert("请输入姓名或者手机号在添加")
				} else {
					temp++;
					$(".btn_upload").hide();
					var strhtml = "";
					var strhtml = "<div class='contact_row' id='linkman_" + temp + "' >";
					var strhtml = strhtml + "		<input  type='text' name='linkname'  placeholder='请输入姓名'  maxlength='20'/>";
					var strhtml = strhtml + "		<input  type='text' name='phone' placeholder='请输入联系电话' maxlength='11'/>";
					var strhtml = strhtml + "		<input  type='text'  name='address' placeholder='请输入地址'  maxlength='100'/>";
					var strhtml = strhtml + "		<a class='btn btn-primary' href='javaScript:del(" + temp + ");'>删除</a>";
					var strhtml = strhtml + "</div>";
					$("#addman").append(strhtml);
					$(".btn_upload").show();
				}
			}

			function del(temp) {

				var id = 'linkman_' + temp;
				$("#" + id).empty();
				$("#" + id).remove();
				var linkmanContractDiv = document.getElementById('addman');
				var linkmanContracts = linkmanContractDiv.getElementsByTagName('div');
				if(linkmanContracts.length == 0) {
					temp = 0;
					var strhtml = "";
					var strhtml = "<div class='contact_row' id='linkman_" + temp + "' >";
					var strhtml = strhtml + "		<input  type='text' name='linkname'  placeholder='请输入姓名'  maxlength='20'/>";
					var strhtml = strhtml + "		<input  type='text' name='phone' placeholder='请输入联系电话' maxlength='11'/>";
					var strhtml = strhtml + "		<input  type='text'  name='address' placeholder='请输入地址'  maxlength='100'/>";
					var strhtml = strhtml + "		<a  href='javaScript:del();'>删除</a>";
					var strhtml = strhtml + "</div>";
					$("#linkman_" + id).remove();
					$(".btn_upload").show();
					alert("删除成功!")
				}

			}
		</script>
	</body>

</html>