How do i disable submit button in javascript after deadline

Question

How do i disable submit button in javascript after deadline

522 Views Asked by Oluwafemi Akinyemi At 05 April 2025 at 20:44

How do I disable a submit button in JavaScript after the deadline.

Please I need to submit a button to be taken away after the deadline or return an alert that the deadline is gone.

Thanks

<body>
  <h2>Welcome! </h2>
  <p>Please find below your responsibilities for the month</p>

  <div class=t ask> Task 1 </div>
  <p>Please Submit your report in the space below</p>
  <h3 style="color: red"> DEADLINE: 20/04/2020</h3>
  <form>
    <textarea>
    </textarea> <br> <br>
    <button>Submit</button>
  </form>
</body>

Original Q&A

There are 1 best solutions below

**Booboo** · Answer 1

You can use a windows.setTimeout call to trigger an event to hide the submit button. To compute the number of milliseconds into the future this event should happen, you create a Date object with the date 4/20/2020 and a second Date object with the current date. You then call getTime() on both of these objects. This functions is defined as:

Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC.

The difference between the two values is the number of milliseconds into the future 4/20/2020 12:00:00 AM occurs and should be the argument for the call to window.setTimeout. For the following demo, after this calculation is done, the computed value is overridden with 10,000 ms. for demo purposes:

document.addEventListener('DOMContentLoaded', function(event) {
  let deadline = new Date(2020, 4, 20); // at 12:00 AM
  let now = new Date(); // current date and time
  let milliseconds = deadline.getTime() - now.getTime();
  milliseconds = 10000; // set to 10 seconds for testing purposes
  let submit = document.getElementById('submit');
  if (milliseconds > 0) {
    window.setTimeout(function() {
      submit.style.display = 'none';
    }, milliseconds);
  }
  else {
    submit.style.display = 'none';
  } 
});

<body>
  <h2>Welcome! </h2>
  <p>Please find below your responsibilities for the month</p>

  <div class=t ask> Task 1 </div>
  <p>Please Submit your report in the space below</p>
  <h3 style="color: red"> DEADLINE: 20/04/2020</h3>
  <form>
    <textarea>
    </textarea> <br> <br>
    <button id="submit">Submit</button>
  </form>
</body>

The comment posted by developer should be taken seriously. You should also have a check on the server side to check whether the form was submitted on or after 4/20/2020 12:00:00 AM using the appropriate time zone. On the client side, we were using the local time zone but the number of milliseconds difference between two dates should be somewhat time zone independent, although there could be small differences.

If you want to be precise in calculating the number of milliseconds to expiration, you can use:

let deadline = new Date(2020, 4, 20).toLocaleString("en-US", {timeZone: "America/New_York"});
deadline = new Date(deadline);
let now = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
now = new Date(now);

Of course you would use whatever timezone is appropriate for your application. Note that after assigning deadline = new Date(2020, 4, 20).toLocaleString("en-US", {timeZone: "America/New_York"}); you end up with a Date object that has no getTime function and hence the need to construct a new Date object from that.

How do i disable submit button in javascript after deadline

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in FORMS

Related Questions in BUTTON

Related Questions in EXPIRED-SESSIONS

Related Questions in DEADLINES

Trending Questions

Popular # Hahtags

Popular Questions