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替换textarea中换行的方法
Jun 10 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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的安全策略
2006/10/09 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php网页病毒清除类
2014/12/08 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python魔术方法专题
2020/06/19 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
函授本科自我鉴定
2014/02/04 职场文书
学校工作推荐信范文
2014/07/11 职场文书
兽医医药专业求职信
2014/07/27 职场文书
实习计划书范文
2015/01/16 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
社区安全温馨提示语
2015/07/14 职场文书