仅在满足条件时才使用 javascript 重置 html 表单答案

【问题标题】：Reset html form using javascript only when a condition is satisfied仅在满足条件时才使用 javascript 重置 html 表单
【发布时间】：2018-06-03 14:33:12
【问题描述】：

如果输入到文本框中的文本与预定义的文本不匹配，我需要重置 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，最新）来测试我的代码

【问题讨论】：

发送消息“这是 X 型废物”。输入正确的代码时显示？
是的。他们留下来。但表格被重置。我不能这样做，因为我必须将数据转发到另一个页面。
你在哪里使用这个功能？你在提交表单时使用它吗？请分享您的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>
如果你不能从评论中得到它，我也更新了这个问题。

标签： javascript function debugging reset

【解决方案1】：

好的，我知道我做错了什么。我一直在我的文本框中使用 oninput 事件，该事件在将字符输入文本框后立即调用该函数。我用 onchange 事件代替了它。现在它工作正常。还是谢谢大家。

【讨论】：

【解决方案2】：

只有在调用 reset() 方法时才会重置表单。即使值与预定义的文本匹配，您是否总是看到单独打印“文本不匹配”？尝试在 switch 块之前放置一个 console.log(code) 以查找从输入字段读取的值。

【讨论】：

不。它可以正常工作。当输入正确的文本时，它会在显示中显示定义的文本。它只是重置表单。
当我使用 console.log() 函数时，它会加载以下内容：
W 更新 data.php:10 WA 更新 data.php:10 WAS 更新 data.php:10 WAST 更新 data.php:10 WASTE 更新 data.php:10 WASTE1

【解决方案3】：

使用 JavaScript Switch 语句，您可以做到这一点。但是使用Regular Expressions 会好很多。

var myTimer;

function showData() {
    var code = document.getElementById( 'bcno' ).value.trim().toUpperCase(),
        disp = document.getElementById( 'display' );

    switch ( code ) {
        case 'W':
        case 'WA':
        case 'WAS':
        case 'WAST':
        case 'WASTE':
            break;
        case 'WASTE1':
            disp.innerHTML ="This Is Waste Type 1.";
            break;
        case 'WASTE2':
            disp.innerHTML ="This Is Waste Type 2.";
            break;
        case 'WASTE3':
            disp.innerHTML ="This Is Waste Type 3.";
            break;
        case 'WASTE4':
            disp.innerHTML ="This Is Waste Type 4.";
            break;
        default:
            myTimer = setTimeout( function () { document.getElementById( 'updateform' ).reset(); }, 2000 );
            disp.innerHTML = 'The text does not match. Form will be reset!!.';
            break;
    }
}

document.getElementById( 'updateform' ).addEventListener( 'reset', function () {
  clearTimeout( myTimer )
} )

<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" />
    <span id="display"></span>
    <br>
    <label for="ino">Quantity: </label>
    <input type="number" id="ino" name="ino" value="1" />
    <br /><br />
    <input type="submit" value="Confirm">
</form>

【讨论】：

谢谢。虽然我解决了眼前的问题，但我还有另一个程序可以使用你的 sn-p。