Hide / Show Div with countdown?

JavaScript
1

I have a resend email form:

<form id="form_16343495" method="post" action="" name="emailVerifyForm">
<input name="form_name" id="input_35233041" value="emailVerifyForm" type="hidden">

   
                        <div class="email_verf_margin" style="display: inline;"><label for="input_20222589">Email</label>:</div><div class="email_verf_margin" style="display: inline;"> <input name="email" id="input_20222589" style="width:330px;" value="testingcountdown@testingcountdown.com" type="text"></div>
                        <span class="ow_button"><span class=" ow_ic_mail"><input value="Send" id="input_68966015" class="ow_ic_mail" name="sendVerifyMail" type="submit"></span></span><br><div style="color: red;"><span id="input_20222589_error" style="display:none;" class="error"></span></div>
    
</form>

How can I at first hide entire form on page load and show a countdown like 5 min.

When countdown runs out show form.

When user submits form hide again and show countdown.

On form submission page will reload!!!

2

Hide it by setting the display property to none, then use a timer to display the form after a certain amount of time has elapsed.

The following snippet will hide the form on page load and then display it after three seconds:

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Display form after time delay</title>
  </head>

  <body>
    <form id="myForm">
      <label for="name">Name: </label>
      <input name="name" />
      <button>Submit</button>
    </form>

    <script>
      const myForm = document.getElementById('myForm');
      myForm.style.display = 'none';
      setTimeout(() => {
        myForm.style.display = 'block';
      }, 3000);
    </script>
  </body>
</html>

Hopefully this will serve as a starting point, but let us know if you have any questions.

If you want to implement an additional timer, here’s a good tutorial:

3

Thank you so much. is there a way to show physically count down clock with minutes and seconds please?

4

Yup, check that link. It’s all in there (presuming you mean a digital clock).

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.