在表单提交上保留动态提交的 select 选项

Question

我有一个 html 表单，其中包含动态填充的 select:

    <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>

问题是当我提交表单时，所有 select 值都消失了。提交表格时如何保留它们？我查看了与此类似的问题，但其中 none 解决了我的特殊情况。

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

我使用 golang 作为 net/http 的后端。虽然，我认为它在这里没有太多链接，但如果它有助于解决问题，请告诉我。

注：beforeSubmit()函数为空。我可以放什么来保留选项？

Answer 1

您应该替换此代码：

type="submit"

到 type="button"

 <button type="button" name="type" id="btn_encrypt" value="encrypt">Encrypt</button>
 <button type="button" name="type" id="btn_decrypt" value="decrypt">Decrypt</button>

Answer 2

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

推荐使用ES6 Maps存储<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();
    }
};

在表单提交上保留动态提交的 select 选项

Retain dynamically submitted select options on form submit

html

javascript

forms

select

form-submit