Hi guys I’m looking to write a javascript to change the date in the date box when I update the status select box.
For example the initial date on the datebox is 6/1/2021. And I will click on status rejected. The date should automatically change to today 6/3/21 without manually clicking the date picker box
<html>
<body>
<select>
<option value="Offered">Offered</option>
<option value="Accepted">Accepted</option>
<option value="Rejected">Rejected</option>
</select">
<input type="date" id="date" name="date">
<input type="submit" value="Submit">```
</body>
</html>
Advertisement
Answer
I hope this answers your question. I have added comments for better clarity. In case you have any issues, let me know.
//Getting the select HTML node.
const select = document.querySelector("#select");
//Getting the date input node.
const date = document.querySelector("#date");
//Adding a change event listener to the select node.
select.addEventListener('change', () => {
//Had to use ISOString with slice method, since the date picker only accepts the date value in "yyyy-MM-dd" format.
date.value = new Date().toISOString().slice(0, 10);
});<html>
<body>
<select id="select">
<option value="Offered">Offered</option>
<option value="Accepted">Accepted</option>
<option value="Rejected">Rejected</option>
</select>
<input type="date" id="date" name="date">
<input type="submit" value="Submit">
</body>
</html>