javascript - 仅当满足条件时才使用 javascript 重置 html 表单

Question

我有一个代码，如果输入到文本框中的文本与预定义的文本不匹配，我需要重置 html 表单。但是，如果我使用 reset() 函数，即使文本与预定义文本匹配，表单也会重置。我该如何避免这个问题？这是我的代码。

    function showData() {
    var code= document.getElementById("bcno").value.trim();
    switch(code)
    {
        case "WASTE1":
        document.getElementById('display').innerHTML ="This Is Waste Type 1.";
        break;
        case "WASTE2":
        document.getElementById('display').innerHTML ="This Is Waste Type 2.";
        break;
        case "WASTE3":
        document.getElementById('display').innerHTML ="This Is Waste Type 3.";
        break;
        case "WASTE4":
        document.getElementById('display').innerHTML ="This Is Waste Type 4.";
        break;
        default:
        setTimeout(function(){document.getElementById("updateform").reset();}, 2000);
        document.getElementById('display').innerHTML ="The text does not match. Form will be reset momentarily!!.";
        break;

    }

这是 html 部分。

    <form action="dbupdate.php" method="post" id="updateform" 
     name="updateform"> 
    <label for="bcno">Item ID: </label>
    <input type="text" autofocus="autofocus" name="bcno" id="bcno" 
    oninput="showData()" autocomplete="off" /> <br /><br /> 
    <div id="display"></div> 
    <label for="ino">Quantity: </label>
    <input type="number" id="ino" name="ino" value="1" /><br /><br /> 
    <input type="button" onclick="document.updateform.submit();" 
    value="Confirm"> </form>

bcno 是文本框的 ID。我究竟做错了什么？ 我还使用 Google Chrome(最新版本 63.0.3239.132)来测试我的代码

Answer 1

好吧，我知道我做错了什么。我一直在文本框中使用 oninput 事件，一旦在文本框中输入字符，该事件就会调用该函数。我将其替换为 onchange 事件。现在效果很好。不管怎样，谢谢大家。