如何在页面提交/重载后重新填充表单输入值

Question

我试图在提交/页面重新加载后重新填充保存的表单输入。我遇到的问题是输入字段填充保存的值(或任何字符串)，但随后几乎立即重置。我错过了什么?由于

瓶(服务器):

@app.route("/code", methods=["GET", "POST"])
def code():
value = request.form["field1"]
return render_template(
"code.html",
saved_inputs = value
)

Html:

<form action="{{ url_for('code') }}" method="post" id="form">
<label for="field1">Test Input 1 </label>
<input type"text" name="field1" id="field1">
<button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>

JS:

<script>
$("#form").on('submit', function(event){
event.preventDefault();
// convert form to JSON
var formData = new FormData(document.getElementById('form'));
var formJSON = {};
for (var entry of formData.entries())
{
formJSON[entry[0]] = entry[1];
}
result = JSON.stringify(formJSON)
console.log("results is: "+result);

// set JSON to local Storage
sessionStorage.setItem('formObject', result);

// submit form
document.getElementById("form").submit();

// decode sessionstorage object
var decodedObj = JSON.parse(sessionStorage.getItem('formObject'));
console.log("sessionStorage object: "+decodedObj);
// alert("value is: "+decodedObj["field1"]);
// alert("jinja value is: "+"{{ saved_inputs }}");
// retrieve localStorage and populate input
// this is not working as expected
document.getElementById("field1").value =  "WHY ISN'T THIS SAVING??";
// document.getElementById("field1").value =  '{{ saved_inputs }}';
})
</script>

Answer 1

我认为您面临的问题是您没有检查页面何时加载-只有在提交表单时才检查。要在页面加载时加载表单，我们可以使用sessionStorage检查记录是否存在，然后将对象加载到表单中。

$(function() {
const formObj = sessionStorage.getItem('formObject');
// Load object
if (formObj != null) {
console.log("Previous form session exists")
let decodedObj = JSON.parse(formObj);
console.log("sessionStorage object: " + decodedObj);
console.log("value is: " + decodedObj["field1"]);
// retrieve sessionStorage and populate input
console.log("Loading previous session");
document.getElementById("field1").value = decodedObj["field1"];
}
});

概念验证

Answer 2

您可以尝试将值存储在本地存储&然后在页面重新加载时检索它们。已使用会话存储。明白了。