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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
js验证身份证号码记录的方法
Apr 26 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读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python3数字求和的实例
2019/02/19 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pytest中文文档之编写断言
2019/09/12 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
《生命 生命》教学反思
2014/04/19 职场文书
初一学生评语大全
2014/04/24 职场文书
小学教师教育随笔
2015/08/14 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python