jQuery复制表单元素附源码分享效果演示
网络编程 2021-07-04 21:03www.168986.cn编程入门
当我们遇到提交表单时,需要我们重复添加好几个表单,在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮,也就是新增一项,通过点击复制按钮来实现新增一项,怎么实现的呢?狼蚁网站SEO优化长沙网络推广跟大家分享,需要的朋友的朋友可以参考下
我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品、表单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮,通过点击按钮即可实现复制表单元素。
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复制表单元素附源码分享效果演示,希望对大家有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程