記住動態添加的輸入元素和它們的值

我有一個頁面創建嚮導，我正在構建，我允許用戶最多添加3個圖像到頁面。我目前使用的代碼可以完成這項工作，但它並不像我想要的那樣工作。在我的頁面嚮導，這是一個包含文件輸入HTML：記住動態添加的輸入元素和它們的值

<div class="pictures"> 
    <label>Add Pictures </label><span>(Maximum: 3)</span> 
    <span id="input_container"></span> 
    <a href="javascript:addPic()">add</a> | 
    <a href="javascript:rmvPic()">remove</a> 
</div>

和我的JavaScript看起來像這樣：

var picNum = 0; 

function addPic() { 
    if (picNum < 3) { picNum++; 
     var input = document.createElement('input'); 
     input.setAttribute('type', 'file'); 
     input.setAttribute('name', 'picture_' + picNum); 
     input.setAttribute('id', 'picture_' + picNum); 

     var container = document.getElementById('input_container'); 
     container.appendChild(input); 
    } 
} 

function rmvPic() { 
    if (picNum > 0) { 
     var container = document.getElementById('input_container'); 
     container.removeChild(document.getElementById('picture_' + picNum)); 
     picNum--; 
    } 
}

該電流設置允許用戶動態地添加他們想要的圖像的量到他們的頁面，但在他們提交表單並返回編輯頁面之後，他們添加的所有元素現在都會從頁面中刪除。我希望這樣，當用戶回來並想要更改圖像時，嚮導會記住他們添加的圖片數量以及他們的值。

我不知道我說的是否合理，所以如果你需要更多的信息，我願意提供。如果你需要知道這一點，我正在使用ruby在rails上工作。

來源

2012-07-25 Huub Mons

當你說「回到編輯頁面」時，我假設你的意思是發生頁面加載。如果是這樣的話，那麼你會失去添加圖像的已提交頁面的狀態（javascript vars將被重置）。如果您執行了提交操作，那麼您所查找的值應該存在於服務器上。所以，當重新加載編輯頁面時，您需要從服務器（ajax）請求值或在頁面範圍內呈現它們。

我不清楚你在頁面之間的導航方式，或者你如何存儲提交的值，所以我在這裏推出了很多假設。

簡而言之，HTML是無狀態的，因此您需要一種方法將值存儲在頁面之間。您可以存儲在服務器上或本地存儲（在cookie或本地緩存中）。

如果沒有您的應用程序結構的更清晰的視圖，我不能推薦一種方法。

來源

2012-07-25 21:22:41

記住動態添加的輸入元素和它們的值

回答

相關問題