如何在 jquery 的弹出窗口中创建表单？答案

【问题标题】：How do I create a form inside popup in jquery?如何在 jquery 的弹出窗口中创建表单？
【发布时间】：2018-01-07 14:33:56
【问题描述】：

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

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

问题 1
小对话框不能是额外的 html 表单，因为另一个表单中的表单是不可能的。

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

【问题讨论】：

这需要在许多问题上展开，它非常广泛。您想要一个搜索面板，人们可以输入并提取庇护所的分页结果？
动物收容所只是一个例子。我真正感兴趣的是上面解释的行为。我有一个表格，我想在那个表格中添加类似另一个表格的东西。因为我知道这是不可能的，所以我正在寻找替代方案。对不起，我不是那么精确，我不是母语人士。随意完全改变文本。我想要的一切都在图片中进行了解释（最后一帧类似于主菜单，在第 1-3 帧中您可以看到第一个表单，在第 2 帧中是“内部表单”）

标签： javascript php html forms list

【解决方案1】：

我终于解决了。耶！

首先我创建了主窗体

<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;
    }
});

基本上，我从jqueryui.com 上找到的示例中复制了源代码（您可以通过输入调试器来获得它，在 Firefox 中这意味着按 F12 键）并对其进行了一些调整。

【讨论】：