HTML+jQuery实现动态添加输入框


一个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/>
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 () {
2     var 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 });

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM