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


Posted in Javascript onSeptember 30, 2015

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

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

查看演示 下载源码

HTML

本文我们通过实例介绍一款简单的基于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>

jQuery

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

$(function () { 
    $('#additional').duplicateElement({ 
      "class_remove": ".remove", 
      "class_create": ".create", 
      onCreate: function (el) { 
        el.find("select").prop('defaultSelected'); 
        el.find(".input").val(''); 
      } 
    }); 
  });

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

以上内容就是给大家分享的jQuery复制表单元素附源码分享效果演示,希望对大家有所帮助。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
js实现创建删除html元素小结
Sep 30 #Javascript
node.js下LDAP查询实例分享
Sep 30 #Javascript
Javascript中replace()小结
Sep 30 #Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 #Javascript
谈谈JavaScript异步函数发展历程
Sep 29 #Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 #Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 #Javascript
You might like
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
angular分页指令操作
2017/01/09 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
高考考python编程是真的吗
2020/07/20 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
个人自荐信
2013/12/05 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
《春晓》教学反思
2014/04/20 职场文书
煤矿安全承诺书
2014/05/22 职场文书
消防安全宣传标语
2014/06/07 职场文书
颐和园的导游词
2015/01/30 职场文书
亮剑观后感600字
2015/06/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL