A-A+

基于jQuery复制表单元素的例子

2016年01月12日 web前端设计 暂无评论 阅读 6 views 次

jQuery复制表单元素这种做法在开发应用中用到的不是很多了,但也会有需要了,这里我们为各位整理一个关于基于jQuery复制表单元素的例子

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品、表单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮,通过点击按钮即可实现复制表单元素。

本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能,首先载入jQuery库文件和元素复制插件duplicateElement.min.js。

  1. <script src="jquery.js"></script>   
  2. <script src="duplicateElement.min.js"></script>  

我们假设需要复制用户信息元素,表单html结构如下:

  1. <form id="myform" name="myform" action="post.php" method="post">   
  2.     <fieldset id="additional">   
  3.         <label for="name">客户姓名:</label>   
  4.         <input id="name" name="name[]" type="text" class="input" >   
  5.         <label for="flag">客户级别:</label>   
  6.         <select id="flag" name="flag[]">   
  7.             <option disabled="" selected="">请选择</option>   
  8.             <option value="1">VIP</option>   
  9.             <option value="2">普通</option>   
  10.          </select>   
  11.                 
  12.             <a href="javascript:void(0);"  class="btn remove">移除</a>   
  13.             <a href="javascript:void(0);"  class="btn create">复制</a>   
  14.         </fieldset>   
  15.                
  16.         <br/>   
  17.         <div class="sub_btn">   
  18.             <input type="submit" class="button" value="提交">   
  19.         </div>   
  20. </form>   

jQuery,我们点击“复制”按钮时,将#additional里的内容进行复制,相当于新增一行,初始的时候只显示“复制”按钮,复制完后,原来的那条则显示“移除”按钮,点击“移除”则可将对应的行移除。

  1. $(function () {   
  2.     $('#additional').duplicateElement({   
  3.         "class_remove"".remove",   
  4.         "class_create"".create",   
  5.         onCreate: function (el) {   
  6.             el.find("select").prop('defaultSelected');   
  7.             el.find(".input").val('');   
  8.         }   
  9.     });   
  10. });   

我们还可以通过onCreate()回调函数来定义复制成功后,新增的表单元素的属性,如表单元素值或样式等。

标签:

给我留言