源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery复制表单元素附源码分享效果演示

  • 时间:2020-11-22 19:17 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery复制表单元素附源码分享效果演示
我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品、表单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮,通过点击按钮即可实现复制表单元素。 [img]http://files.jb51.net/file_images/article/201509/2015930120432373.png?201583012447[/img] [b][url=http://demo.jb51.net/js/2015/copyelement]查看演示[/url] [url=http://xiazai.jb51.net/201509/yuanma/copyelement(jb51.net).rar]下载源码[/url][/b] [b]HTML[/b] 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能。 首先载入jQuery库文件和元素复制插件duplicateElement.min.js。
<script src="jquery.js"></script> 
<script src="duplicateElement.min.js"></script> 
我们假设需要复制用户信息元素,表单html结构如下:
<form id="myform" name="myform" action="post.php" method="post"> 
  <fieldset id="additional"> 
    <label for="name">客户姓名:</label> 
    <input id="name" name="name[]" type="text" class="input" > 
    <label for="flag">客户级别:</label> 
    <select id="flag" name="flag[]"> 
      <option disabled="" selected="">请选择</option> 
      <option value="1">VIP</option> 
      <option value="2">普通</option> 
     </select> 
      <a href="javascript:void(0);" class="btn remove">移除</a> 
      <a href="javascript:void(0);" class="btn create">复制</a> 
    </fieldset> 
    <br/> 
    <div class="sub_btn"> 
      <input type="submit" class="button" value="提交"> 
    </div> 
</form> 
[b]jQuery[/b] 我们点击“复制”按钮时,将#additional里的内容进行复制,相当于新增一行,初始的时候只显示“复制”按钮,复制完后,原来的那条则显示“移除”按钮,点击“移除”则可将对应的行移除。
 $(function () { 
    $('#additional').duplicateElement({ 
      "class_remove": ".remove", 
      "class_create": ".create", 
      onCreate: function (el) { 
        el.find("select").prop('defaultSelected'); 
        el.find(".input").val(''); 
      } 
    }); 
  }); 
我们还可以通过onCreate()回调函数来定义复制成功后,新增的表单元素的属性,如表单元素值或样式等。 以上内容就是给大家分享的jQuery复制表单元素附源码分享效果演示,希望对大家有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部