2013-06-24 122 views
3

我有一個鏈接,鏈接的目的是當我點擊它時動態添加文本框。但問題是,如果我在前面生成的文本字段中輸入了文本並單擊該鏈接,則會生成文本字段,但頁面刷新和輸入文本會重置。如何在文本域中保留文本

HTML文件

<script> 
    var countBox =3; 
    var boxName = 0; 
    function addInput() 
    { 
     var boxName="textBox"+countBox; 
    document.getElementById('responce').innerHTML+='<br /><input type="radio" name="choices" value="o'+countBox+'" id="o'+countBox+'"/><label>Option '+countBox+':</label> <input type="text" id="option'+countBox+'" name="option'+countBox+'"" placeholder="Enter here..." /><br/>'; 
     countBox += 1; 
    } 
</script> 
<br /><a href="javascript:void()" onclick="addInput()">Add another</a>(max.5) 

我如何添加文本字段,並保留在文本框的文本。希望你明白我的問題

在此先感謝。

+0

您需要保存刷新之間的頁面的狀態?餅乾。 – mishik

+0

數據將在頁面刷新時丟失,直到您在代碼中使用一些會話或cookie概念! – 2013-06-24 07:22:59

+0

嘗試追加輸入類型。 – Naeem

回答

8

頁面是不是刷新,所以這不是問題。問題是您正在使用.innerHTML +=添加新元素。這是將銷燬重新創建現有元素:將元素序列化爲HTML,然後連接字符串以添加新的HTML,並在分配之後瀏覽器必須解析HTML以再次創建DOM元素。在這個過程中,所有數據都將丟失。

改爲使用DOM操作方法。即使用document.createElement創建元素並將其與Node.appendChild一起添加。

使用.innerHTML覆蓋現有內容或第一次初始化元素即可。但使用它到元素添加到現有元素可能會導致問題(如上所述),因此在這種情況下最好避免。

例子:

function addInput() { 
    var boxName="textBox"+countBox; 
    var input = document.createElement('input'); 
    input.id = input.name = 'option'+countBox; 

    var parent = document.getElementById('responce'); 
    parent.appendChild(document.createElement('br')); 
    parent.appendChild(input); 
    // create/add other elements... 
    countBox += 1; 
} 

或者兩者的混合:

function addInput() { 
    var boxName="textBox"+countBox; 
    var container = document.createElement('div'); 
    container.innerHTML = '<input type="radio" name="choices" value="o'+countBox+'" id="o'+countBox+'"/><label>Option '+countBox+':</label> <input type="text" id="option'+countBox+'" name="option'+countBox+'"" placeholder="Enter here..." />'; 

    document.getElementById('responce').appendChild(container); 
    countBox += 1; 
} 
+4

+1我發表了同樣的文章,但是這說明了一切,無論如何,這是我完全轉換的小提琴http://jsfiddle.net/UkeuH/ – MrCode