How to retain my date textbox value when reset-CodePudding

I have a textbox that gets the current date and time. I have tried calling the function to get the date but it is not working.

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date   " "   m   " "   year   " "   d   " "   hour   ":"   (min <10?'0':'')   min;
  document.getElementById("date").value = datestring;
}
getDate();

<form id="myForm">
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30" onreset="getDate()"><br>
  <input type="reset">
</form>

CodePudding user response：

You have to move the getDate function to button not input.

Solution

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date   " "   m   " "   year   " "   d   " "   hour   ":"   (min <10?'0':'')   min;
  document.getElementById("date").value = datestring;

  console.log(datestring)
}
getDate();

<form id="myForm">
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30" /><br>
  <input type="button" onClick="getDate()" value="get date">
</form>

CodePudding user response：

The function called on the reset event is called before the form gets cleared, so the datestring is set when the function is called but then the form input gets cleared. You will have to do 2 things to make this work

Move onreset event to the form element
Add a set timeout so that the input element value is set after the form is reset

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date   " "   m   " "   year   " "   d   " "   hour   ":"   (min <10?'0':'')   min;
 
  setTimeout(() => document.getElementById("date").value = datestring)
  
}
getDate();

<form id="myForm" onreset="getDate()">
  <label for="date">Current date: </label>
  <input type="text" id="date" readonly size="30" >
  <input type="reset">
</form>