防止在onclick事件之后重置表单的值，并将用户的输入保存在会话存储中

时间：2019-09-16 05:30:14

标签： javascript jquery html forms

我有一个单页网站，该网站的界面在{{ 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>

此代码根据需要显示预测，但是正如我所说的，表单已提交，但每次都会清除，但我需要将值保留在表单中。

谢谢您的帮助。

1 个答案:

答案 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>
相关问题
最新问题