如何使用Javascript無限期地將字段添加到表單中？

我是JavaScript DOM的新手。我在www.quirksmode.org/dom/domform.html找到了一個教程。我重寫了代碼以滿足我的需求，但是當我無法使其工作時，我將此頁面中的代碼直接複製到測試頁面中。 moreFields函數將運行onload，但不是onclick。 removeFields函數確實有效。我已經在Firefox和Chromium中測試了代碼。它在教程中的Firefox中工作，但即使我逐字複製它也不行。我甚至嘗試從教程中複製源代碼。如何使用Javascript無限期地將字段添加到表單中？

<script type="text/javascript"> 
<!-- 

var counter = 0; 

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); 
} 

window.onload = moreFields; 

// --> 
</script> 

<div id="readroot" style="display: none"> 

<input type="button" value="Remove review" 
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 

<input name="cd" value="title" /> 

<select name="rankingsel"> 
    <option>Rating</option> 
    <option value="excellent">Excellent</option> 
    <option value="good">Good</option> 
    <option value="ok">OK</option> 
    <option value="poor">Poor</option> 
    <option value="bad">Bad</option> 
</select><br /><br /> 

<textarea rows="5" cols="20" name="review">Short review</textarea> 
<br />Radio buttons included to test them in Explorer:<br /> 
<input type="radio" name="something" value="test1" />Test 1<br /> 
<input type="radio" name="something" value="test2" />Test 2 

</div> 

<form method="post" action="/cgi-bin/show_params.cgi"> 

<span id="writeroot"></span> 

<input type="button" id="moreFields" value="Give me more fields!" /> 
<input type="submit" value="Send form" /> 

</form>

來源

2013-06-13 Corey Ray

我忘了提，我在一個PHP變量輸入這讓我有逃離「'」 S –

你可以在javascript中使用「樣式引用」，如果這些引用不需要轉義，它會使整個事物變得更具可讀性 – dspeyer

你的腳本有語法問題，你不應該使用'\''ex '\'readroot \''應該是''readroot''或''readroot'' –

此代碼不起作用，因爲函數moreFields（）未附加到按鈕#moreFields的單擊事件。

只需更改行19

window.onload = function(){ 
    document.getElementById('moreFields').onclick = function(){ moreFields(); } 
    moreFields(); 
}

來源

2013-06-13 03:34:56

+1在函數中不需要包含* moreFields *，您可以直接指定一個引用，這也可以避免創建不必要的閉包這可能會導致舊版本的內存泄漏rowsers。 – RobG

謝謝！那樣做了！ –

@RobG如何在Javascript中引用一個函數？我熟悉PHP，但我是JavaScript新手。 IE $ var1 = @ $ var2; –

您的問題（除了不包括每盧卡斯的回答按鈕的偵聽器）是你有‘moreFields’的ID的元素，因而如果你有一個像聽衆：

<input id="moreFields" ... onclick="moreFields();">

然後在監聽器，moreFields引用按鈕本身，而不是功能。因此，要麼更改名稱或ID不衝突（按鈕並不需要一個名字或ID反正），或調用功能窗口的屬性：

<input id="moreFields" ... onclick="window.moreFields();">

使用的addEventListener或直接作業也將解決這個問題：

window.onload = function() { 
    document.getElementById('moreFields').onclick = moreFields; 
    moreFields(); 
}

來源

2013-06-13 03:36:10 RobG

您在這裏有多個問題。

你逃避'與\'這是無效的，字符串與在''或""被封閉。
沒有爲morefields按鈕沒有點擊處理
，因爲你有一個功能，按鈕與ID有一個範圍問題morefields

嘗試

<div id="readroot" style="display: none"> 

    <input type="button" value="Remove review" 
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 

    <input name="cd" value="title" /> 

    <select name="rankingsel"> 
     <option>Rating</option> 
     <option value="excellent">Excellent</option> 
     <option value="good">Good</option> 
     <option value="ok">OK</option> 
     <option value="poor">Poor</option> 
     <option value="bad">Bad</option> 
    </select><br /><br /> 

    <textarea rows="5" cols="20" name="review">Short review</textarea> 
    <br />Radio buttons included to test them in Explorer:<br /> 
    <input type="radio" name="something" value="test1" />Test 1<br /> 
    <input type="radio" name="something" value="test2" />Test 2 

</div> 

<form method="post" action="/cgi-bin/show_params.cgi"> 

    <span id="writeroot"></span> 

    <input type="button" value="Give me more fields!" onclick="moreFields()"/> 
    <input type="submit" value="Send form" /> 

</form>

而且

var counter = 0; 

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); 
} 

window.onload = moreFields;

演示：fiddle

來源

2013-06-13 03:39:13

感謝您的輸入。我是逃避單引號，因爲我是從一個PHP變量輸出這個（使用我創建的MVC框架。是的，我知道我正在重新發明輪子）我不知道單引號或雙引號在Javascript中的重要性，所以我使用了什麼我看到並逃脫了他們。 –

您需要將moreFields（）函數作爲onclick事件附加到按鈕。

您可以通過改變現有的onload代碼這個做這種方式：

window.onload = function() { 
    moreFields(); 
    document.getElementById('moreFields').onclick = moreFields; 
};

我們等待添加的onclick直到窗口負載，因爲否則的HTML按鈕將不會到那個時候裝（有也是DOMContentLoaded事件，但一次只能做一件事......）。

您也可以將調用添加到您的按鈕元素上的moreFields，但請注意，您必須更改您的ID或其他方式，對於INLINE JavaScript（即不在腳本標記或單獨的腳本文件中），該元素將作爲一個變量使用其ID顯示，它會嘗試調用元素「moreFields」（並因此給出錯誤），而不是功能moreFields()。

<input type="button" id="moreFields1" onclick="moreFields()" value="Give me more fields!" />

（或者你可以做RobG提到和顯式調用窗口上的moreFields。）

來源

2013-06-13 03:41:11

如何使用Javascript無限期地將字段添加到表單中？

回答

相關問題