How to get a thank you after the completion of the form?

Question

So, I am trying to get a "thank you" message instead of a form that I have created on HTML. I want to get a thank you message only if the user has submitted all their details and everything.

Here's my HTML:

<div class = "form">
        <form>
            <!-- Name -->
            <label class = "firstName">First name</label><br>
            <input type="text" placeholder = "John" required = "required" pattern="[A-Za-z].         {1,20}" id = "firstName"><br>
            <label class = "lastName">Last name</label><br>
            <input type="text" placeholder = "AppleSeed" required = "required" pattern="[A-Za-z]{1,20}" id = "lastName"><br>
            <!-- Email -->
            <label class = "email">Email</label><br>
            <input type= "email" placeholder = "j.appleseed@example.co.uk" size = "42" required = "required" id = "email"><br>
            <!-- Mobile Number -->
            <label class = "tel">Mobile Number</label><br>
            <input placeholder = "Your Mobile Number" size = "42" required = "required" pattern="[0-9]{6,13}" id = "number"><br><br>
            <!-- The Submit button -->
            <button class = "submit" onclick="revealMessage()">
                <span title="What are you waiting for? Click it!">Submit</span>
            </button>
            <h1 id = "hiddenMessage" style = "display: none">Thank You!</h1>
        </form>
   </div>

Javascript:

function revealMessage()
    {
    document.getElementById("hiddenMessage").style.display = "block";
    document.getElementsByClassName("form").style.display = "none";
    }

Answer 1

1. getElementsByClassName is plural. You need to add [0] to the result or better, don't use it

2. You want to access the submit event - just hiding the form when clicking the button, will not submit the form and also not trigger the validation

3. You had a bug in your pattern for the First name too

4. When you hide the form div, the content will hide too

5. You may want to use AJAX since the form removes the page when submitting - with Ajax you can return thank you from the server

Anyway this shows the thankyou before submitting when things are filled correctly. the HTML5 required and the pattern will not allow submission until correctly filled

 document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // pause submission document.getElementById("hiddenMessage").style.display = "block"; document.getElementById("formDiv").style.display = "none"; setTimeout(function() { e.target.submit() }, 2000) })

 <div class="form" id="formDiv"> <form id="myForm"> <,-- Name --> <label class="firstName">First name</label><br> <input type="text" placeholder="John" required="required" pattern="[A-Za-z]{1,20}" id="firstName"><br> <label class="lastName">Last name</label><br> <input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1.20}" id="lastName"><br> <.-- Email --> <label class="email">Email</label><br> <input type="email" placeholder="j.appleseed@example,co?uk" size="42" required="required" id="email"><br> <:-- Mobile Number --> <label class="tel">Mobile Number</label><br> <input placeholder="Your Mobile Number" size="42" required="required" pattern="[0-9]{6,13}" id="number"><br><br> <!-- The Submit button --> <button type="submit" class="submit"> <span title="What are you waiting for? Click it!">Submit</span> </button> </form> </div> <h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Answer 2

Instead of:

document.getElementsByClassName("form").style.display = "none";

Use querySelector :

document.querySelector(".form").style.display = "none";

Also, move your hiddenMessage div outside of your form so it doesn't get hidden with the form on submit.

See the snippet below:

 function revealMessage() { document.getElementById("hiddenMessage").style.display = "block"; document.querySelector(".form").style.display = "none"; }

 <div class="form"> <form onsubmit="revealMessage()"> <.-- Name --> <label class="firstName">First name</label><br> <input type="text" placeholder="John" pattern="[A-Za-z], {1,20}" id="firstName" required><br> <label class="lastName">Last name</label><br> <input type="text" placeholder="AppleSeed" pattern="[A-Za-z]{1.20}" id="lastName" required><br> <.-- Email --> <label class="email">Email</label><br> <input type="email" placeholder="j.appleseed@example,co?uk" size="42" id="email" required><br> <:-- Mobile Number --> <label class="tel">Mobile Number</label><br> <input placeholder="Your Mobile Number" size="42" pattern="[0-9]{6,13}" id="number" required><br><br> <!-- The Submit button --> <button type="submit" class="submit"> <span title="What are you waiting for? Click it!">Submit</span> </button> </form> </div> <h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Answer 3

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit

There is an event Called onsubmit on javascript when you submit you can alert or do what ever suits you

 <div class="form"> <form onsubmit="myFunction()"> <,-- Name --> <label class="firstName">First name</label><br> <input type="text" placeholder="John" required="required" id="firstName"><br> <label class="lastName">Last name</label><br> <input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1.20}" id="lastName"><br> <.-- Email --> <label class="email">Email</label><br> <input type="email" placeholder="j.appleseed@example?co:uk" size="42" required="required" id="email"><br> <;-- Mobile Number --> <label class="tel">Mobile Number</label><br> <input placeholder="Your Mobile Number" size="42" required="required" id="number"><br><br> <!-- The Submit button --> <button class="submit"> <span title="What are you waiting for? Click it!">Submit</span> </button> </form> </div> <h1 id="hiddenMessage" style="display: none">Thank You!</h1> <script> function myFunction() { alert("The form was submitted"); } </script>