Question

我有一个HTML表单，需要收集输入到文本框中的信息以及从一组下拉菜单中选择的选项。为了给出一点上下文，我正在创建可以由用户在网页上配置的虚拟机。除了从三个不同的下拉菜单中选择选项外，他们还必须在两个单独的框中输入名称（任意）和主机。因为我正在使用集群，所以可能有多达99个＆＃34;行＆＃34;表示将成为群集一部分的不同系统配置的下拉菜单。

是否有可能（如果是这样，可取？）将文本字段和下拉列表包含在一个表单中？如果没有，我如何确保提交按钮将所有数据发送到我的Django服务器进行处理，因为我需要所有这些信息最终到达同一个地方。

我目前以不同的形式使用它们，但暂时忽略它，因为它目前没有做任何事情。此外，不要担心此代码中缺少下拉菜单，因为addSelect（）JS函数功能完备。只要知道每个添加的节点都有一个唯一的名称（node1，node2等），然后进入div＆＃34;节点＆＃34;。

＆＃13;

<body><b>Virtual Cluster Initialization</b><br></br>
        <div id="container">
        <div id="general">
                <form method="POST" id="naming">Cluster name:<br>
                <input type="text" name="cluster_name">
                <br>
                Host Machine:<br>
                <input type="text" name="host_machine">
                </form>
        </div>
        <form method="POST" id="node_config"></form>
        <div id="nodes" form="node_config"></div>
                <div id=node1">
                     <select name="node_type" id="node_type">Node Type</option>
                             (two options go here)
                     <select name="issp_version" id="issp_version>ISSP Version</option>
                             (7 or so options go here)
                     <select name="os" id="os">Operating System </option>
                             (about 20 options)
        <button id="add" onclick="addSelect('nodes');">+</button>
        </div>
        <br></br><input type="submit"></input>
</body>

＆＃13;

EDIT1：为了清晰起见，添加了一个示例下拉列表。不为每个节点创建一个新的div会更好吗？我最初这样做是因为它似乎是保持每个节点的配置分离的好方法。就像我说的，最多可以有99个节点，每个节点有三个下拉菜单。

Answer 1

不确定我是否明白你在问什么。在添加下拉菜单后向我们显示代码会有所帮助。语法明智，这不会工作。输入应该在表单内，div没有表单属性。

如果您希望将所有内容都放在一个帖子中，请将所有内容放入一个表单中。如果动态添加新表单元素，则可以使用数组作为元素名称。

这样的事情怎么样？

  <script>
    var nodeID = 0;

    function addSelect() {
        var html = "<div id='node_" + nodeID + "'>";
        html += "<select name='node_type[" + nodeID + "]' id='node_type'><option>example</option></select>";
        html += "<select name='issp_version[" + nodeID + "]' id='issp_version'><option>ISSP Version</option></select>";
        html += "<select name='os[" + nodeID + "]' id='os'><option>Operating System </option></select>";
        html += "</div>";

        document.getElementById('nodes').innerHTML += html;
        nodeID++;
    }
</script>
<div style="margin-bottom:20px;"><b>Virtual Cluster Initialization</b>
</div>
<form>
    <div id="container">
        <div id="general">
            <div>Cluster name:</div>
            <div>
                <input name="cluster_name" type="text">
            </div>
            <div>Host Machine:</div>
            <div>
                <input name="host_machine" type="text">
            </div>
        </div>
        <div id="nodes">
            <div>Nodes</div>

            <div id="node_0">
                <select name="node_type[0]" id="node_type"><option>example</option></select>
                <select name="issp_version[0]" id="issp_version"><option>ISSP Version</option></select>
                <select name="os[0]" id="os"><option>Operating System </option></select>
            </div>
            <div id="node_1">
                <select name="node_type[1]" id="node_type"><option>example</option></select>
                <select name="issp_version[1]" id="issp_version"><option>ISSP Version</option></select>
                <select name="os[1]" id="os"><option>Operating System </option></select>
            </div>
        </div>
        <div>
            <button type="button" id="add" onclick="addSelect();">+</button>
        </div>
    </div>
    <div>
        <input type="submit">
    </div>
</form>

这是一个JSfiddle，可以帮助您可视化它的作用： https://jsfiddle.net/fdss08w9/2/

如何在Django中使用它的示例：

    if request.method == 'POST':
        # create a form instance and populate it with data from the request:
        form = NameForm(request.POST)
        # check whether it's valid:
        if form.is_valid():
            # Get the number of nodes we added

            for id, node_type in enumerate(form.cleaned_data['node_type']):
                issp_version = form.cleaned_data['issp_version'][id]
                os = form.cleaned_data['os'][id]

                #do stuff with node_type, issp_version, os

带有选择和文本选项的表单

1 个答案: