jQuery复制表单元素

原创文章 作者:月光光 2015年09月29日 16:53helloweba.com 标签: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()回调函数来定义复制成功后,新增的表单元素的属性,如表单元素值或样式等。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/325.html

4条评论

  • 先顶后看~~

  • 移除的时候有BUG,一移除,全部移除了。

  • 表单元素的name属性值设置成abx[]这种,如name="title[]",这样post得到一个数组,然后对数组处理,再写入数据库。你可以将数组转成字符串用逗号隔开,这取决于你的数据表设计。

  • 写入数据库怎么弄啊 他之写入最后的值吧 能用逗号分开吗 例如 张三,李四