我想创建一个具有表单字段/组件重复功能的简单表单。
我在网上到处找。但是我找不到合适的教程。
例如,我的表单字段包含以下内容。
1. Title
2. Email
3a. Image Name
3b. Image Description
3c. Image file
3a、3b、3c在这里是一组。所以我们称之为"图像组"。我希望在该组下面有一个重复的链接,我的用户可以点击它并复制他们想要的任何数量。
下面是我所问的一个例子。Ps:我不想用jformer。因为它加载了所有的脚本,并且加载页面需要很长时间。这就是我问这个问题的原因。
感谢
您所需要做的就是编写一个JavaScript函数,将一组新的表单元素附加到给定的容器中。类似这样的东西:
<div id="imageforms">
<fieldset id="firstimage">
<input type="text" name="imagenames[]" />
<textarea name="imagedescriptions[]"></textarea>
<input type="file" name="imagefiles[]" />
</fieldset>
</div>
<a href="#" onclick="addAdditionalImage(); return false;">add another image</a>
然后你需要JavaScript函数:
function addAdditionalImage() {
$('#imageforms').append($('#firstimage').clone());
}
这里最有趣的部分是name="xxx[]"
的使用,它告诉PHP根据表单值创建一个数组。
由于您将问题标记为与jquery相关,因此您应该在此处查看克隆方法:http://api.jquery.com/clone/
你需要对可以复制的字段进行分组(比如说把它们放在一个跨度中),这样你就可以为所有字段都有一个选择器,克隆,然后使用append或prepend等方法再次"注入"相同的元素
如果要在服务器端处理这些值,则应该使用数组作为名称(input type="text"name="image_name[]")