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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python 中的 else详解
2016/04/23 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python range实例用法分享
2020/02/06 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
房地产开发项目建议书
2014/05/16 职场文书
关于建议书的格式范文
2014/05/20 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技