How do i disable submit button in javascript after deadline

Question

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>

you need some javascript. look at setInterval (https://www.w3schools.com/jsref/met_win_setinterval.asp) - test condition at each interval. Also check when button is clicked. then remove button. you can remove the button by setting its style to 'display: none;' - but note this only protects the client - if you want to prevent a server operation (because you have a form - im assuming you are submitting it at some point) - you should have similar checks/protection on server, as there is nothing to stop people writing their own client, and posting to your server/backend — developer, Apr 08 '20 at 12:30
Please I'm new to this language and this been my first assignment, have tried all i could but didn't get it. Yes I have a JavaScript page which takes my client to this Task page but my problem now is I couldn't do the deadline thing. — Oluwafemi Akinyemi, Apr 08 '20 at 12:40
Please use the search function on this site to see if someone has asked a similar question before posting your own. Here is a search with some answers that might help. https://stackoverflow.com/search?q=how+to+disable+a+submit+button. I understand that it can be difficult to even know what to search for if you are just starting out in programming or in a new language. You will see from that search that all 5 of the top answers have JavaScript in them which may be a clue that you will not be able to do this with just HTML. — Ryan, Apr 08 '20 at 13:26

Booboo · Answer 1 · 2020-04-08T13:29:34.373

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

1 Answers1