我有一个单页网站，该网站的界面在{{ prediction_text }}后端的flask中显示预测结果。用户正在将值输入表单，然后使用app.py脚本获取预测结果。
我的问题是我的表单在每次提交时都会重置。我不要那个。我想保留用户输入的值。
到目前为止，我已经尝试了两种方法：在第一种方法中，我尝试使用document.getElementByName.defaultValue设置值
第二个是elem[i].setAttribute(elem[i].name, loadedPermax[i])。
我将loadedPermax与sessionStorage一起使用，因为这是我想要的功能。
<script language="JavaScript" type="text/javascript">
var str = [];
var elem = document.getElementById("myForm").elements;
function myFunction() {
for (var i = 0; i < elem.length; i++) {
str += elem[i].value + ";";
}
var res = str.split(";");
sessionStorage.setItem("permax", JSON.stringify(res));
document.getElementById('demo').innerHTML = str;
};
function SetDefaultValue() {
loadedPermax = JSON.parse(sessionStorage.getItem("permax"));
for (var i = 0; i < 10; i++) {
console.log(elem[i].name);
console.log(loadedPermax[i]);
document.getElementsByName(elem[i].name).defaultValue = loadedPermax[i]; //1st try
elem[i].setAttribute(elem[i].name, loadedPermax[i]) //2nd try
}
};
window.onload = function(){
SetDefaultValue();
};
</script>
我在jQuery中尝试过的另一种方法：
$("myForm").submit(function(e){
e.preventDefault();
});
哪个也没给我结果。
这是我的HTML表单：
<!DOCTYPE html>
<html >
<!--From https://codepen.io/frytyler/pen/EGdtg-->
<head>
<meta charset="UTF-8">
<title>ML API</title>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="login">
<h1>Loan simulator</h1>
<!-- Main Input For Receiving Query to our ML -->
<form id="myForm" action="{{ url_for('predict')}}"method="post" class="form_class">
<div>
<select name="kraj">
<option value="Plzeňský kraj">Plzeňský kraj</option>
<option value="Středočeský kraj">Středočeský kraj</option>
<option value="Olomoucký kraj">Olomoucký kraj</option>
<option value="Ústecký kraj">Ústecký kraj</option>
<option value="Moravskoslezský kraj">Moravskoslezský kraj</option>
<option value="Jihomoravský kraj">Jihomoravský kraj</option>
<option value="Karlovarský kraj">Karlovarský kraj</option>
<option value="Liberecký kraj">Liberecký kraj</option>
<option value="Hlavní město Praha">Hlavní město Praha</option>
<option value="Pardubický kraj">Pardubický kraj</option>
<option value="Královéhradecký kraj">Královéhradecký kraj</option>
<option value="Jihočeský kraj">Jihočeský kraj</option>
<option value="Zlínský kraj">Zlínský kraj</option>
<option value="Kraj Vysočina">Kraj Vysočina</option>
</select>
</div>
<div>
<select name="prijem">
<option value="OSVČ">OSVČ</option>
<option value="Zaměstnanec">Zaměstnanec</option>
<option value="Důchod">Důchod</option>
<option value="Rodičovská dovolená">Rodičovská dovolená</option>
<option value="Jiné">Jiné</option>
<option value="Svobodné povolání">Svobodné povolání</option>
<option value="Nezaměstnaný">Nezaměstnaný</option>
<option value="Podnikatel">Podnikatel</option>
<option value="Student">Student</option>
</select>
</div>
<div>
dalsi prijem
<select name="dalsiPrijem">
<option value="1">Ano</option>
<option value="0">Ne</option>
</select>
</div>
<div>
<select name="ucel">
<option value="Jiné">Jiné</option>
<option value="Refinancování půjček">Refinancování půjček</option>
<option value="Auto-moto">Auto-moto</option>
<option value="Vlastní projekt">Vlastní projekt</option>
<option value="Cestování">Cestování</option>
<option value="Domácnost">Domácnost</option>
<option value="Elektronika">Elektronika</option>
<option value="Vzdělání">Vzdělání</option>
<option value="Zdraví">Zdraví</option>
</select>
</div>
<div>
<select name="urokovaSazba">
<option value="0.0299">2,99 %</option>
<option value="0.0399">3,99 %</option>
<option value="0.0499">4,99 %</option>
<option value="0.0599">5,99 %</option>
<option value="0.0699">6,99 %</option>
<option value="0.0849">8,49 %</option>
<option value="0.0949">9,49 %</option>
<option value="0.1099">10,99 %</option>
<option value="0.1349">13,49 %</option>
<option value="0.1549">15,49 %</option>
<option value="0.1999">19,99 %</option>
</select>
</div>
<div>
<input type="text" name="objem" id="objem" placeholder="Objem" required="required" />
</div>
<div>
<input type="text" name="poradiPujcky" placeholder="Pořadí půjčky" required="required" />
</div>
<div>
pojistka
<select name="pojisteno">
<option value="1">Ano</option>
<option value="0">Ne</option>
</select>
</div>
<div>
<input type="text" name="puvodniPocetSplatek" placeholder="Původní počet splátek" required="required" />
pribeh
<select name="pribeh">
<option value="1">Ano</option>
<option value="0">Ne</option>
</select>
</div>
<div>
<button onclick="myFunction()" type="submit" class="btn btn-primary btn-block btn-large" >Predict</button>
</div>
</form>
<p id="demo"></p>
<br>
<br>
{{ prediction_text }}
</div>
<script language="JavaScript" type="text/javascript">
var str = [];
var elem = document.getElementById("myForm").elements;
function myFunction() {
for (var i = 0; i < elem.length; i++) {
str += elem[i].value + ";";
//console.log(elem.name);
}
var res = str.split(";");
sessionStorage.setItem("permax", JSON.stringify(res));
//console.log(str); - this works
document.getElementById('demo').innerHTML = str;
};
function SetDefaultValue() {
loadedPermax = JSON.parse(sessionStorage.getItem("permax"));
for (var i = 0; i < 10; i++) {
console.log(elem[i].name);
console.log(loadedPermax[i]);
document.getElementsByName(elem[i].name).defaultValue = loadedPermax[i]; //1st try
elem[i].setAttribute(elem[i].name, loadedPermax[i]) //2nd try
}
};
$("myForm").submit(function(e){
e.preventDefault();
});
window.onload = function(){
SetDefaultValue();
};
</script>
</body>
</html>
此代码根据需要显示预测，但是正如我所说的，表单已提交，但每次都会清除，但我需要将值保留在表单中。
谢谢您的帮助。
答案 0 :(得分：0)
您可以使用eventListener来避免在提交表单后重新加载表单。
let form = document.getElementById('myForm')
function myFunction(e) {
e.preventDefault();
let data = new FormData();
data.append("input1", input1Value);
data.append("input2", input2Value);
fetch('your_URL',{
method: 'POST'
headers: {
"Accept":"application/json",
"Content-type": "application/json; charset=UTF-8"
},
body: JSON.stringify(data)
})
};
form.addEventListener('submit',myFunction)
<form id="myForm" class="form_class">
//html code
<button id="submit" type="submit">Submit form</button>
</form>