记住动态添加的输入元素及其值

remembering dynamically added input elements and their values

本文关键字：元素 输入 动态 添加      更新时间：2024-02-29

我正在构建一个页面创建向导，我允许用户向页面添加最多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 on rails合作。

当您说"返回编辑页面"时，我假设您的意思是发生页面加载。如果是这种情况，那么您将丢失添加图像的提交页面的状态（javascript vars将重置）。如果您执行了提交，则服务器上应该存在您要查找的值。因此，当重新加载编辑页面时，您需要从服务器（ajax）请求值或在页面范围内呈现它们。

我不清楚你是如何在页面之间导航的，也不清楚你如何存储提交的值，所以我在这里做了一些假设。

简而言之，HTML是无状态的，因此您需要一种在页面之间存储值的方法。您可以在服务器上存储，也可以在本地存储（在cookie或本地缓存中）。

如果不能更清楚地了解你的应用程序的结构，我无法推荐一种方法。

相关文章：