我有一个HTML表单,需要收集输入到文本框中的信息以及从一组下拉菜单中选择的选项。为了给出一点上下文,我正在创建可以由用户在网页上配置的虚拟机。除了从三个不同的下拉菜单中选择选项外,他们还必须在两个单独的框中输入名称(任意)和主机。因为我正在使用集群,所以可能有多达99个"行"表示将成为群集一部分的不同系统配置的下拉菜单。
是否有可能(如果是这样,可取?)将文本字段和下拉列表包含在一个表单中?如果没有,我如何确保提交按钮将所有数据发送到我的Django服务器进行处理,因为我需要所有这些信息最终到达同一个地方。
我目前以不同的形式使用它们,但暂时忽略它,因为它目前没有做任何事情。此外,不要担心此代码中缺少下拉菜单,因为addSelect()JS函数功能完备。只要知道每个添加的节点都有一个唯一的名称(node1,node2等),然后进入div"节点"。
<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个节点,每个节点有三个下拉菜单。
答案 0 :(得分:0)
不确定我是否明白你在问什么。在添加下拉菜单后向我们显示代码会有所帮助。语法明智,这不会工作。输入应该在表单内,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