jQuery复制表单元素附源码分享效果演示

2024-10-23 02:13:06

我们在提交表单时，有时会遇到需要重复添加多个相同表单元素，如订单信息中需要添加多个不同型号的产品、表单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮，通过点击按钮即可实现复制表单元素。

查看演示下载源码

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复制表单元素附源码分享效果演示，希望对大家有所帮助。

实用jquery操作表单元素的简单代码

取下拉菜单选中项的文本: 获取和设置下拉菜单的值: 清空下拉菜单: 给下列菜单添加元素: 取单选框值: 单选或复选按钮的选择: 取复选框值: 判断单选或复选框是否被选中: 元素可用不可用: 判断元素可用不可用. 实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr(&
使用jQuery时Form表单元素ID和name命名大忌

在做自己的毕业设计的时候将自己的表单元素ID和name命名为了nodeName: 复制代码代码如下: <form> <input type="text" name="nodeName" id="nodeName"> ........... </form> 在chrome浏览器下可以看到这么个错误: Uncaught TypeError: Object #<HTMLInputElement> has
JQuery对表单元素的基本操作使用总结

select下拉列表onChange事件之JQuery实现: JQuery: $(document).ready(function () { $("#selectMenu").bind("change", function () { if ($(this).val() == "pro1") { $("#pro1").slideDown(); $("#pro2").slideUp(); } else if($
jQuery获取和设置表单元素的方法

jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值.使用val()不带参数,表示获取元素的值使用val()给定参数,则表示把值赋给元素如下: 复制代码代码如下: //获取值alert($("input#mytextbox").val());alert($("select#mylist").val());alert($("input#myradio").val()); //设置值$(&quo
jquery序列化表单去除指定元素示例代码

复制代码代码如下: <html> <head> </head> <body> <form name="form1"> <input type="hidden" name="page1" class="flau_u_ro" value="1"></input> <input type="hidden"
jquery的attr方法禁用表单元素禁用输入内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti
jQuery实现form表单元素序列化为json对象的方法

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&
jquery获取form表单input元素值的简单实例

一般取值方法 $("#id").val(); $("#id").attr("value"); //其中value是元素的属性名如<s:textfield id="cifName" key="cifName" name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sav
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
jQuery复制表单元素附源码分享效果演示

我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr
基于Bootstrap实现Material Design风格表单插件附源码下载

Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件.该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效. 在线预览源码下载使用方法使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css.materialForm.js文件. <link rel=
Jquery 垂直多级手风琴菜单附源码下载

首先给大家展示下效果图,喜欢的朋友继续往下看哦. 这是一款简单但实用的多级垂直手风琴下拉列表菜单.该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果. 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作.如果需要一些好看的动画效果,可以实用插件中提供的main.js文件,它可以提供菜单打开和收缩时左侧小箭头的动画效果. 效果演示源码下载使用方法 HTML结构该多级手风琴菜单的HTML结构非常简单:整个手风琴是一个无
基于jQuery实现的扇形定时器附源码下载

效果图如下所示: 效果演示源码下载 Pietimer是一个可以在页面上生成一个扇形变化的定时器,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色.宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线考试.限时抢购的场景. HTML 首先加载jquery库文件和pietimer.js文件. <script src="jquery.min.js"></script> <script src="jqu
jquery设置表单元素为不可用的简单代码

本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type=
jQuery实现产品对比功能附源码下载

产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,用户只需勾选多个需要对比的产品,就可以进行比对.本文将使用jQuery来给大家讲解如何实现产品对比功能. 查看演示下载源码 HTML HTML结构我们分三部分,第一是产品列表部分,展示所有可以对比的产品.我们以某手机网站为例,简单的结构,只需展示产品图片和名称,以及一个添加按钮.注意我们把手机的相关参数信息都放在属性data-*里,等会后面展示对比信息的时
jQuery实现表单步骤流程导航代码分享

本文实例讲述了jQuery实现表单步骤流程导航.分享给大家供大家参考.具体如下: jQuery表单步骤流程导航是一款多步骤进度,多个提交的实现一步一步填写表单提交信息代码,每次填写完信息时都会提醒是否提交,如果想对信息进行再次修改,也可以进行返回操作,页面效果简洁大方,红黑搭配很经典,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家
jquery 获取表单元素里面的值示例代码

jquery 笔记: 复制代码代码如下: $("input[name='radio_name']:checked").val() <input type="radio" value="1" name="radio_name" />1 <input type="radio" value="2" name="radio_name" />2 <
jQuery自动完成插件completer附源码下载

我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入.诸如此类的还有时间的输入.域名的输入都能自动完成,这些都由插件completer来帮您实现. 效果展示图如下所示: 效果展示源码下载 HTML 首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了. <script src="jquery.js"><
基于jQuery实现选取月份插件附源码下载

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单. 效果展示源码下载 HTML 首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件. <link rel="stylesheet" type="text/css" href="jquery.mon

jQuery复制表单元素附源码分享效果演示

相关推荐

随机推荐