HTML+jQuery实现动态添加input输⼊框
⼀个html⽂件和⼀个js⽂件配合,在html⽂件⾥引⼊js⽂件,⽤jQuery为<a>标签添加⼀个点击事件,事件⾥只需写⼀个append函数就可以。HTML源码:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6<script src="jquery-2.2.2.min.js"></script>
7<script src="add.js"></script>
8</head>
9<body>
10<form method="post" action="">
11专题列表:<a href="#" id="AddMoreTextBox">添加输⼊框</a>
12<br/>
13<div id="InputsWrapper">
14<input type="text" name="news[]" id="news_1" value="Text 1"><br/><br/>
jquery源码在线15<input type="text" name="news[]" id="news_2" value="Text 2"><br/><br/>
16<input type="text" name="news[]" id="news_3" value="Text 3"><br/><br/>
17</div>
18<input type="submit" name="edit" value="提交">
19</form>
20</body>
21</html>
jQuery源码:
1 $(document).ready(function () {
2var InputCount=3;
3 $("#AddMoreTextBox").click(function (e)
4 {
5 InputCount++;
6 $("#InputsWrapper").append('<label></label><input type="text" name="news[]" id="news_' + InputCount + '" value="Text '+ InputCount +'"/><br/><br/>');
7 });
8 });
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论