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

时间:2018-01-07 14:33:57

标签: javascript php html forms list

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

  1. 列出动物收容所(例如)
  2. 按一个按钮创建一个新的(html表格)(第1帧)
  3. 添加动物(具有多个特征的物体)(第2帧)
  4. 在表单中列出这些对象(第3帧)
  5. 在我的名单中有一个新的动物收容所(第4帧)
  6. 问题1
    小对话框不能成为额外的html表单,因为不可能使用其他形式的表单。

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

    what I want to do

1 个答案:

答案 0 :(得分:0)

我终于解决了它。 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上找到的示例并稍微调整一下。