如何在jquery中的popup中创建表单？

Question

我想创建一个类似于下面所表达的行为：

1. 列出动物收容所（例如）
2. 按一个按钮创建一个新的（html表格）（第1帧）
3. 添加动物（具有多个特征的物体）（第2帧）
4. 在表单中列出这些对象（第3帧）
5. 在我的名单中有一个新的动物收容所（第4帧）

问题1
小对话框不能成为额外的html表单，因为不可能使用其他形式的表单。

问题2
由于每只动物都有多个功能，因此使用javascript动态地将文本字段添加到表单中看起来不太好。

Answer 1

我终于解决了它。 Yaay！

首先我创建了主窗体

<form action="/path/to/action.php" method="post">
    <input type="text" name="name" required>
    <input type="text" name="address" required>

    <span id="add-animal">+</span>
    <select id="animals" name="animals[]" multiple></select>

    <input type="submit">
</form>

我还创建了第二个表单

<div id="animal-form">
    <form>
        <input type="text" id="animalname" required>
        <input type="number" id="animalage" required>
    </form>
</div>

其余的我使用了jQuery

$(function() {
    var animalname = $("#animalname");
    var animalage = $("#animalage");

    dialog = $("#animal-form").dialog({
        autoOpen: false,
        resizable: false,
        modal: false,
        buttons: {
            "Add": addAnimal,
            "Cancel": function() {
                dialog.dialog("close");
            }
        },
        close: function() {
            form[0].reset();
        }
    });

    form = dialog.find("form");

    $("#add-animal").on("click", function() {
        dialog.dialog("open");
    });

    function addAnimal() {
        var animals = document.getElementById("animals");

        var animal = document.createElement("option");
        animal.text = animalname.val();
        animal.setAttribute("value", animalage.val() + ":" + animalname.val()); // Encode all values into one value that can be passed
        animal.setAttribute("selected", ""); // select it because it's in a <select> and has to be passed

        animals.add(animal);
        dialog.dialog("close");

        return true;
    }
});

基本上我复制了源代码（您可以通过在Firefox中输入调试器来获取，这意味着点击F12键）来自我在jqueryui.com上找到的示例并稍微调整一下。