Question

我有一个带有动态填充选择的html表单：

    <form action="/" method="post" onsubmit="beforeSubmit()" id="crypto_form">
        <textarea name="message" id="textarea_message" oninput="this.value.toUpperCase()" cols="60" rows="5" placeholder="Enter Message"></textarea>
        <select form="crypto_form" name="keydata" id="select_keydata"></select>
        <button type="submit" name="type" id="btn_encrypt" value="encrypt">Encrypt</button>
        <button type="submit" name="type" id="btn_decrypt" value="decrypt">Decrypt</button>
    </form>

问题在于，当我提交表单时，所有选择值都消失了。提交表格时如何保留他们？我看了与此类似的问题，但没有一个解决我的特殊情况。

我认为正在发生的事情是页面正在重新加载，这就是选项消失的原因。

我将golang用作net/http的后端。虽然，我认为这里的链接不多，但是请告诉我它是否有助于解决问题。

注意：beforeSubmit()函数为空。有什么我可以保留的选项吗？

Answer 1

好吧，如果网站正在刷新，则可以使用localStorage或sessionStorage来将数据保存在浏览器中。

建议使用ES6映射存储<option>值。然后可以将地图转换为JSON字符串并存储在您的localStorage/sessionStorage中。

下面是向地图添加<option>文本和值的代码段：

map.set(option.text, option.value)

所以您的beforeSubmit()函数看起来像这样：

function beforeSubmit() {
    sessionStorage.myMap = JSON.stringify(Array.from(map));
};

当您要检索数据时，例如，在window.onload中，您可以按照以下步骤进行操作：

var map;

window.onload = function() {
    if (sessionStorage.myMap != null) {
        map = new Map(JSON.parse(sessionStorage.myMap));
    } else {
        map = new Map();
    }
};

Answer 2

您应该替换此代码：

TypeError: read property 'buttonGroup' of undefined

到 type="submit"

type="button"

在表单提交中保留动态提交的选择选项

2 个答案: