Question

我正在尝试使用Django构建一个网站。在网站上，用户可以通过从库中选择来填写成分列表。这部分工作正常。当我希望提交列表时，麻烦就开始了。我写了以下表格：

<ul id="user_ing_list" class="content">
</ul>   
<div class="headline">
    <form action="{% url 'opskriftssoegning:soegeresultat' %}" method="get" accept-charset="utf-8">
        <button type="submit" name="ingsoegning" onclick="prepare_user_ing_list()">Find opskrifter</button>
    </form>
</div>

单击按钮时，应运行以下JavaScript函数：

var user_ing_list = document.getElementById("user_ing_list");

function prepare_user_ing_list() {
    var result_list = [];
    for (ing in user_ing_list) {
        result_list.append(ing)
    };
    return result_list;
}

我认为表单会从函数中接收项目列表并提交它，但生成的Django视图告诉我没有提交任何内容。我做错了什么？

Answer 1

我不知道你要提交什么作为清单，但如果你愿意的话获取li的内容作为列表，应该做这样的事情：

1）将type="submit"更改为阻止自动提交的type="button"。

2）你不能在ul上使用循环，并且应该得到li个孩子。

3）应将信息附加到表单中，并将列表附加到表单数据中可以使用hidden输入[]表示数据是列表。

4）将数据添加到表单后，可以提交表单。

尝试这样的事情：

<ul id="user_ing_list" class="content">

</ul>

<div class="headline">
    <form action="{% url 'opskriftssoegning:soegeresultat' %}" method="get" accept-charset="utf-8" id="ing_form">
        <button type="button" name="ingsoegning" onclick="prepare_user_ing_list()">Find opskrifter</button>
    </form>
</div>

js：

    var user_ing_list = document.getElementById("user_ing_list");
    var form          = document.getElementById('ing_form');

    function prepare_user_ing_list() {

        // Find li items inside ul
        var items = user_ing_list.getElementsByTagName("li");

        for (var i = 0; i < items.length; ++i) {

            var input = document.createElement('input');

            input.setAttribute('name', 'list[]');
            input.setAttribute('value', items[i].textContent);
            input.setAttribute('type', 'hidden');

            form.appendChild(input);
        }
        // Submit the form
        form.submit();
    }

如何使用javascript填充HTML表单然后提交它

1 个答案: