表單中多個輸入字段的“添加/刪除”選項
[英]Add/Remove option for multiple input fields in form
問題描述
我使用的表格帶有“添加更多城市”選項，可以輸入多個城市名稱。 有一個按鈕t0也刪除字段。 它工作正常，但問題在下面的代碼中，我也得到了第一個城市的刪除按鈕，這也是不正確的。
因此，如何從第一組輸入框中刪除“刪除”按鈕。 對於所有新生成的字段，“刪除”按鈕應繼續。
我從此網站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>
1 個解決方案
解決方案1
1 已采納 2012-03-19 10:51:53
像這樣修改您的JavaScript；
<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>
添加/刪除多個輸入字段
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.