复制/克隆多个表单域

时间：2013-03-17 作者：Josh Rodgers

不知道该怎么称呼这个，但我正在制作一个表单，该表单要求提供产品信息（名称、描述、颜色、功能等），但我想做的是让用户可以通过单击链接添加其他产品。他们可以根据需要添加任意多的产品。输入完信息后，他们可以单击一个链接"Add another product" 或者类似的东西，表格会给他们一整套可以填写的新字段。通过相同的表单，页面将随着项目的添加而增长，并且它将成为相同表单的一部分（而不必根据每个产品反复提交表单）。

我希望我说的有道理，有没有人知道这个词的意思，或者对可以这样做的插件有什么建议？魔法场可以做到这一点，但在后端，而不是前端。

enter image description here

1 个回复

最合适的回答,由SO网友:Josh Rodgers 整理而成

我没有寻找插件，而是找到了一段代码来解决我的问题，不幸的是，因为我没有使用插件，这篇文章与WordPress无关，与主题无关。对于那些好奇的人，我使用的代码位于：http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(\'#btnAdd\').click(function() {
                var num     = $(\'.clonedInput\').length;
                var newNum  = new Number(num + 1);

                var newElem = $(\'#input\' + num).clone().attr(\'id\', \'input\' + newNum);

                newElem.children(\':first\').attr(\'id\', \'name\' + newNum).attr(\'name\', \'name\' + newNum);
                $(\'#input\' + num).after(newElem);
                $(\'#btnDel\').attr(\'disabled\',\'\');

            if (newNum == 5)
                $(\'#btnAdd\').attr(\'disabled\',\'disabled\');
        });

        $(\'#btnDel\').click(function() {
            var num = $(\'.clonedInput\').length;

            $(\'#input\' + num).remove();
            $(\'#btnAdd\').attr(\'disabled\',\'\');

            if (num-1 == 1)
                $(\'#btnDel\').attr(\'disabled\',\'disabled\');
        });

        $(\'#btnDel\').attr(\'disabled\',\'disabled\');
    });
    </script>
</head>

    <body>
        <form id="myForm">
            <div id="input1" class="clonedInput">
                Name: <input type="text" name="name1" id="name1" />
            </div>

            <div>
                <input type="button" id="btnAdd" value="add another name" />
                <input type="button" id="btnDel" value="remove name" />
            </div>
        </form>
    </body>
</html>

结束

标签： forms plugin-magic-fields 小码农

Adding Custom Forms

我正在寻找创建一个婚礼网站，将有一个表单页面。其想法是，这是一个RSVP页面，访客将输入他们收到的邀请上的唯一字符串，并将他们带到另一个页面，该页面将包含信息（出席人数、客人数量等），然后将其存储在数据库中，这样我就有了一个完整的客人列表，可以用于以后的用途。我还不太熟悉Wordpress，那么有什么最简单的方法可以让页面包含表单，并且第二个输入页面不会显示在导航中？我应该能够编写php和形成html没有太多的麻烦，只是需要一个起点。

小码农CODE

复制/克隆多个表单域

相关推荐

Adding Custom Forms