Question

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

Answer 1

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

我不清楚你在页面之间的导航方式或存储提交值的方式，所以我在这里做了很多假设。

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

如果没有更清楚地了解您的应用的结构，我不推荐一种方法。

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

1 个答案: