表单中多个输入字段的“添加/删除”选项 [英] Add/Remove option for multiple input fields in form
问题描述
我正在使用一个表单，其中包含添加更多城市的选项，可以输入多个城市名称。还有一个按钮t0也删除了字段。
这是完美的工作，但问题是在下面的代码我得到第一个城市的删除按钮也是不正确的。
I am using a form with the option of Add more city to enter more than one city name. There is a button t0 remove the fields also. It is working perfect but the problem is in below code I am getting the remove button for first city also which is not correct.
那我怎么能删除第一组输入框中的删除按钮。所有新生成的字段都应该继续删除按钮。
So how can I remove the 'remove' button from the 1st set of input box. Remove button should continue for all the newly generated fields.
我从这个网站获得了这个代码 http://www.quirksmode.org/dom/domform.html
I got this code from this website http://www.quirksmode.org/dom/domform.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Extending forms</title>
<script type="text/javascript" src="./Javascript - Extending forms_files/quirksmode.js"></script>
<script type="text/javascript">
<!--
var counter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
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('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>
<body>
<!--This prat will be dynamically generated on clicking the add more button (and this is the default one to be shown in the page)-->
<div id="readroot" style="display: none">
<input type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
<label for="city">City:</label> <input type="text" class="pssng1" name="city" value="" />
<label for="days">Days:</label> <input type="text" class="pssng1" name="days" value="" />
</div>
<!--This prat will be dynamically generated on clicking the add more button-->
<form method="post" >
<div id="" style="display: block; "></div>
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Add more!">
</form>
</body>
</html>
推荐答案
像你一样修改你的JavaScript;
Modify your JavaScript like;
<script type="text/javascript">
<!--
var counter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=1;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
这篇关于表单中多个输入字段的“添加/删除”选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
