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

 更新时间:2015年09月30日 12:11:45   投稿:mrr  
当我们遇到提交表单时,需要我们重复添加好几个表单,在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮,也就是新增一项,通过点击复制按钮来实现新增一项,怎么实现的呢?下面小编跟大家分享,需要的朋友的朋友可以参考下

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

查看演示 下载源码

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实现小火箭返回顶部特效

    这篇文章主要为大家详细介绍了jQuery实现小火箭返回顶部特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • jQuery组件easyui对话框实现代码

    jQuery组件easyui对话框实现代码

    这篇文章主要为大家详细介绍了jQuery组件easyui对话框实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jQuery解决$符号命名冲突

    jQuery解决$符号命名冲突

    本文主要介绍jQuery中$符号命名冲突的解决方法,希望能帮到大家,有需要的朋友可以参考一下。
    2016-06-06
  • Jquery动态更改一张位图的src与Attr的使用

    Jquery动态更改一张位图的src与Attr的使用

    用Jquery想动态更改一张位图的src发现css不好用而attr貌似是能操作所有属性,包括Jquery未封装的属性,具体实现如下,感兴趣的朋友可以参考下
    2013-07-07
  • 深入理解jquery中extend的实现

    深入理解jquery中extend的实现

    extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如noConflict方法,就是用extend方法来扩展的。下面来一起深入的再学习下jquery中extend的实现吧。
    2016-12-12
  • JS+CSS实现图片预加载与背景图上中下切图

    JS+CSS实现图片预加载与背景图上中下切图

    这篇文章介绍了JS+CSS实现图片预加载与背景图上中下切图的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • TinyMCE 新增本地图片上传功能

    TinyMCE 新增本地图片上传功能

    在TinyMCE 在处理富文本时,可以通过网站的相对路径录入图片地址。
    2010-11-11
  • jQuery带进度条全屏图片轮播特效代码分享

    jQuery带进度条全屏图片轮播特效代码分享

    这篇文章主要介绍了jQuery带进度条全屏图片轮播特效,图片轮播效果特别适合做产品展示,还带有进度条转接全屏图片展示,感兴趣的小伙伴可以参考下
    2015-09-09
  • jQuery实现自动输入email、时间和域名的方法

    jQuery实现自动输入email、时间和域名的方法

    这篇文章主要介绍了jQuery实现自动输入email、时间和域名的方法,涉及jQuery表单操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • jQueryUI写一个调整分类的拖放效果实现代码

    jQueryUI写一个调整分类的拖放效果实现代码

    最近,想用jQuery做一个网页的树目录结构,并且可以使用鼠标拖动调整选项的位置。我在网上找了一下插件,基本上看了好几款比较著名的,都觉得代码太复杂了或者界面太丑了等各种不符合我的要求
    2012-05-05

最新评论