Сброс HTML-формы с использованием JavaScript, только когда условие выполнено - PullRequest
Новая
       7

Сброс HTML-формы с использованием JavaScript, только когда условие выполнено

0 голосов
/ 03 июня 2018

У меня есть код, в котором мне нужно сбросить 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 - это идентификатор текстового поля.Что я делаю неправильно?Также я использую Google Chrome (версия 63.0.3239.132, последняя) для проверки моего кода

Ответы [ 3 ]

0 голосов
/ 03 июня 2018

Хорошо, я понял, что я делаю неправильно.Я использовал в своем текстовом поле событие oninput , которое вызывало функцию, как только в текстовое поле был введен символ.Я заменил его на событие onchange .Теперь работает нормально.В любом случае, спасибо, ребята.

0 голосов
/ 03 июня 2018

С помощью JavaScript Switch Statement вы можете сделать это.Но лучше использовать 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>
0 голосов
/ 03 июня 2018

Форма будет сброшена только при вызове метода reset ().Всегда ли вы видите, что текст «не совпадает» печатается, даже если значение соответствует предопределенному тексту?Попробуйте поместить console.log (code) перед блоком переключателей, чтобы найти значение, считываемое из поля ввода.

...