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>
1 answers
solution1
0 2020-04-08 13:03:22
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.