![](/img/trans.png)
[英]How to change the Input Name based on the dropdown selection in html form?
[英]Adding and removing input tags to a form based on dropdown selection
因此,正如标题所述,我正在尝试将输入标签添加到基于下拉选择的表单中。 这是我到目前为止的内容:
HTML格式:
<form action="/next" method="POST" >
<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="count">
<p>
<div id="something">
<input type="text" name="text" value="" >
<input type="text" name="othertext" value="" >
</div>
</p>
<span id="Room"></span>
</div>
<input type="submit" value="Next" >
</form>
然后执行我想要的Javascript:
function dropdownlist(listindex) {
document.Room = 0;
switch (listindex) {
case "1":
var check = document.getElementById('added');
if (check != null) {
element = document.getElementById('added');
element.parentNode.removeChild(element);
element = document.getElementById('added');
element.parentNode.removeChild(element);
element = document.getElementById('added');
element.parentNode.removeChild(element);
}
break;
case "2":
var check = document.getElementById('added');
if (check == null) {
var counter = 1;
var newFields = document.getElementById('something').cloneNode(true);
newFields.id = 'added';
var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
var theName = newField[i].name
if (theName) newField[i].name = theName + counter;
}
var insertHere = document.getElementById('Room');
insertHere.parentNode.insertBefore(newFields, insertHere);
}
else {
var id = document.getElementById('count');
var countid = id.getElementsByTagName('p')
var number = countid.length;
if (number == 3) {
element = document.getElementById('added');
element.parentNode.removeChild(element);
}
}
现在,这一切都很好地工作了,也许有更好的方法可以做到这一点,但是由于我对javascript的了解很少,所以这是我设法做到的最好的方法。 现在的问题是这样的:如果用户添加了3个元素,然后决定实际返回2,则我必须检查添加了多少标签,我想出的解决方案要求我添加<p>标签围绕在div顶部创建的每个元素周围,因此我可以选择div中的所有<p>标签,然后删除所需数量的标签。
这个解决方案很好,但是后来我注意到这与代码的早期部分弄混了,在那里我将每个输入标签的名称更改为唯一的名称,这是我需要在表单中存储信息的地方。
因此,有人可以建议我采用其他解决方法来实现此功能吗? 根据用户选择添加和删除输入标签,同时为所有标签保留唯一名称? 任何帮助将不胜感激!
输入元素的最大数量是否少? 如果是这样,您可以考虑将它们全部合并到页面的前面,然后启用它们或根据需要设置其可见性:
document.form1.text1.disabled = true; // or false
document.form1.text1.style.visibility = "hidden"; // or "visible"
这需要首先命名您的表单和输入元素:
<form name="form1" ... >
<input type="text" name="text1" ... >
<input type="text" name="text2" ... >
这种方法比通过insertBefore()
, removeChild()
等操作DOM更为简单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.