Reset html form using javascript only when a condition is satisfied

Question

I have a code where I need to reset the html form if the text entered into the textbox doesn't match the predefined ones. However if I use the reset() function, the form is reset even if the text matches the predefined text. How do I avoid this problem? here's my code.

    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;

    }

Heres's the html part.

    <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 is the id of the textbox. What am i doing wrong? Also I am using Google Chrome (version 63.0.3239.132, the latest) to test my code

Do messages "This Is Waste Type X." get displayed when the right codes are entered? — barro32
– barro32, Commented Jun 3, 2018 at 14:37
Yes. and they stay. but the form gets reset. I cant have that since I have to forward the data to another page. — Mosh
– Mosh, Commented Jun 3, 2018 at 14:48
Where do you use this function? Do you use it when submitting the form? Please share your HTML code. — Kavian K.
– Kavian K., Commented Jun 3, 2018 at 14:58
<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> — Mosh
– Mosh, Commented Jun 3, 2018 at 15:07
i've updated the question as aswell if you cant get it from the comment. — Mosh
– Mosh, Commented Jun 3, 2018 at 15:19

Mosh · Accepted Answer · 2018-06-03 15:31:55Z

1

Okay, I got what I was doing wrong. I had been using the oninput event in my textbox which called the function as soon as a character was entered into the textbox. I substituted it with the onchange event. Now it works fine. Thanks anyways guys.

answered Jun 3, 2018 at 15:31

Mosh

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ragu · Accepted Answer · 2018-06-03 14:43:37Z

0

The form will be reset only when the reset() method is called. Always you see the "The text does not match" alone getting printed even if the value matches the predefined text? Try to put a console.log(code) before the switch block to find the value read from the input field.

answered Jun 3, 2018 at 14:43

Ragu

512 bronze badges

3 Comments

Mosh Over a year ago

Nope. it works as it should. when the correct text is entered, it shows the the defined text in display. It just resets the form.

Mosh Over a year ago

when i use the console.log() function it loads the following:

Mosh Over a year ago

W Update data.php:10 WA Update data.php:10 WAS Update data.php:10 WAST Update data.php:10 WASTE Update data.php:10 WASTE1

Kavian K. · Accepted Answer · 2018-06-03 15:56:03Z

With JavaScript Switch Statement, you can do this. But using Regular Expressions is much better.

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>

Thanks. Although I solved my immediate problem I have another program where I can use your snippet.

Collectives™ on Stack Overflow

Reset html form using javascript only when a condition is satisfied

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related