手机版

jQuery复制表单元素带源代码共享效果演示

时间:2021-10-01 来源:互联网 编辑:宝哥软件园 浏览:

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

查看演示下载源代码。

超文本标记语言

本文通过一个例子介绍了一个简单的基于jQuery的元素复制插件,通过调用该插件可以轻松实现元素复制功能。

首先加载jQuery库文件和元素复制插件replicateelement . min . js.

script src=' http : jquery . js '/script script src=' http : copy element . min . js '/script我们假设需要复制用户信息元素,表单的html结构如下:

form id=' my form ' name=' my form ' action=' post . PHP ' method=' post ' field set id=' additional ' label for=' name ' customer name:/labe input id=' name ' name=' name[]。type=' text ' class=' input ' label for=' flag ' customer level:/label select id=' flag ' name=' flag[]' Option disabled=' selected=' '请选择/Option Option value=' 1 ' VIP/Option value=' 2 ' normal/Option/select a href=' JavaScript : void(0);class=' BTN remove ' remove/a a href=' JavaScript : void(0);class=' BTN create ' copy/a/field set br/div class=' sub _ BTN ' input type=' submit ' class=' button ' value=' submit '/div/form jQuery。

当我们单击“复制”按钮时,我们复制#additional中的内容,这相当于添加了一个新行。开始时,只显示“复制”按钮。复印后,原件将显示“删除”按钮。单击“删除”删除相应的行。

$(function () { $('#additional '))。replicateElement({ ' class _ remove ' :)。移除',' class_create':create ',onCreate:函数(el) { el.find('select ')。道具(' DefaultSelected ');el.find('。输入')。val(“”);} });});我们还可以使用onCreate()回调函数来定义成功复制后新添加的表单元素的属性,例如表单元素值或样式。

以上内容是一个具有源代码共享效果的jQuery复制表单元素的演示,供大家分享,希望对大家有所帮助。

版权声明:jQuery复制表单元素带源代码共享效果演示是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。