用javascript保存文本字段的值

我使用javascript構建了一小段代碼，通過單擊按鈕添加更多字段。它工作正常，並且應該添加該字段，但是在點擊添加更多按鈕時，它會丟棄已經存在的字段的值。用javascript保存文本字段的值

您可以運行下面的代碼段來檢查問題...請添加2-3個字段並在這些字段中輸入內容，然後添加另一個字段。你會看到發生了什麼。

var fldsContainer = document.getElementById('fields'); 
 
var fld = '<p><input name="test[]" type="text"></p>'; 
 

 
function addField() { 
 
    fldsContainer.innerHTML += fld; 
 
}

<div id="fields"></div> 
 

 
<button onclick="addField()">Add More Field</button>

我知道jQuery中，我們可以簡單地.append()但我需要在JavaScript的解決方案。在JavaScript中是否有附加方法？

或任何其他方法來解決我的問題，將不勝感激:)

來源

2017-07-31 Omer

變異'.innerHTML'會導致你的所有同級元素的引用將被丟棄，並重新初始化。如果你不想破壞前面的兄弟元素，你應該使用'.appendChild（）'和'document.createElement（'input'）'創建要附加的字段。 –

'.appendChild（）'是一個原生的javascript函數？ – Omer

[MDN文檔'節點＃appendChild（）']（https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild） –

正是因爲fldsContainer內容重新呈現與領域的一個全新的列表中的每個時間。您需要追加到容器。嘗試類似insertAdjacentHTML()方法。

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

var fldsContainer = document.getElementById('fields'); 
 
var fld = '<p><input name="test[]" type="text"></p>'; 
 

 
function addField() { 
 
    fldsContainer.insertAdjacentHTML('beforeend', fld); 
 
}

<div id="fields"></div> 
 

 
<button onclick="addField()">Add More Field</button>

來源

2017-07-31 09:17:29 spirift

謝謝...作品像一個魅力:) – Omer

它可能看起來更大，也許矯枉過正，但我更喜歡我所有輸入跟蹤到一個數組，這樣我自己從需要在未來可能的查詢DOM元素分開。

var fldsContainer = document.getElementById('fields'); 
 
    var fields = []; 
 

 
    function render() { 
 
     fldsContainer.innerHTML = getFields(); 
 
    } 
 

 
    function addField() { 
 
     fields.push(fields.length ? getField(fields.length) : getField(0)); 
 

 
     render(); 
 
    } 
 

 
    function setValue(input, i) { 
 
     fields[i].value = input.value; 
 
    } 
 

 
    function getFields() { 
 
     var str = '' 
 
     fields.forEach(function(field) { 
 
     str += (`<p><input name="${field.name}" value="${field.value}" type="text" onchange="setValue(this, ${field.index})"></p>`); 
 
     }); 
 

 
     return str; 
 
    } 
 

 
    function getField(index) { 
 
     return { 
 
     index, 
 
     name: `test${index}`, 
 
     value: '' 
 
     } 
 
    }

<div id="fields"></div> 
 

 
<button onclick="addField()">Add More Field</button>

來源

2017-07-31 09:59:36

用javascript保存文本字段的值

回答

相關問題