How to not hide my form element after submission if its css display style was set to none previously

Question

$(()=>{

    $("#c").click(function loop(event){

        $("#a").show(1000).submit(function(event){

            if ($("#b").val() === "hello"){

                    $("#a").hide(1000);

                }

            else{
                
                    alert($("#b").val() + " was typed!");
            }
        });
    });
});

    #a{
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a"> name : <input type="name" id="b" value="type 'hello' to hide!"></form>
    <button id="c">do it!</button>

In the above snippet I don't want the input box to disappear from screen when anything other than hello is typed! It should display the message $("#b").val() + " was typed!" but shouldn't hide.

Answer 1

Hope this helps.

It was not actually hidden, rather the DOM itself was removed.

$(()=>{

    $("#c").click(function loop(event){

        $("#a").show(1000).submit(function(event){

            event.preventDefault();

            if ($("#b").val() === "hello"){

                    $("#a").hide(1000);

                }

            else{
                
                    alert($("#b").val() + " was typed!");
            }
        });
    });
});

    #a{
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a"> name : <input type="name" id="b" value="type 'hello' to hide!"></form>
    <button id="c">do it!</button>