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 相关文章推荐
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
node.js的事件机制
Feb 08 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 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/06/20 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python模块smtplib学习
2018/05/22 Python
Python单元测试简单示例
2018/07/03 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python中def是做什么的
2020/06/10 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
运动会广播稿300字
2014/01/10 职场文书
暑期社会实践感言
2014/02/25 职场文书
如何写早恋检讨书
2014/09/10 职场文书
新年寄语2016
2015/08/17 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript