JavaScript populate two form fields with Today's Date

Question

I have the code in JSfiddle . But two things don't happen. Unchecking the box only affects one field ( entry_date ) and when I submit the form the field expiration_date does not get written to the DB -- the entry_date does. I have jerry rigged the script. I know nothing about JS so any tips would be welcome.

 function onCheck(checkbox) { var entry_date = document.getElementById('entry_date'); var expiration_date = document.getElementById('expiration_date'); entry_date.disabled = checkbox.checked; expiration_date.disabled = checkbox.checked; if (checkbox.checked) { //entry_date.value = new Date().toISOString().substr(0, 10); //expiration_date.value = new Date().toISOString().substr(0, 10); entry_date.valueAsDate = new Date(); expiration_date.valueAsDate = new Date(); } else entry_date.value = ''; }

 Day Guest<br> <input type="checkbox" id="myCheck" name="dayguest" onclick="onCheck(this);"> <!--If checkbox is checked date box is disabled--> <br> <!--Gets today's date and puts it as max--> <label for="entry_date">Arrival Date</label> <input type="date" id="entry_date" name="entry_date"> <br> <label for="entry_date">Departure Date</label> <input type="date" id="expiration_date" name="expiration_date">

Answer 1

Your form code isn't included, so I can't speak to the backend/database issue, but the reason unchecking the box only affects one field is because your else statement only changes one value, not both:

entry_date.value = '';

Adding a corresponding statement to reset the second field will address that problem:

expiration_date.value = '';

Not related to the problem at hand, but your second <label> is corresponding to entry_date rather than expiration_date (fixed in the below snippet).

 function onCheck(checkbox) { var entry_date = document.getElementById('entry_date'); var expiration_date = document.getElementById('expiration_date'); entry_date.disabled = checkbox.checked; expiration_date.disabled = checkbox.checked; if (checkbox.checked) { //entry_date.value = new Date().toISOString().substr(0, 10); //expiration_date.value = new Date().toISOString().substr(0, 10); entry_date.valueAsDate = new Date(); expiration_date.valueAsDate = new Date(); } else { entry_date.value = ''; expiration_date.value = ''; } }

 Day Guest<br> <input type="checkbox" id="myCheck" name="dayguest" onclick="onCheck(this);"> <!--If checkbox is checked date box is disabled--> <br> <!--Gets today's date and puts it as max--> <label for="entry_date">Arrival Date</label> <input type="date" id="entry_date" name="entry_date"> <br> <label for="expiration_date">Departure Date</label> <input type="date" id="expiration_date" name="expiration_date">

Answer 2

The first problem is simple: you forgot to assign to expiration_date.value in the else block.

The second problem is that disabled inputs are not submitted in forms. If you want to prevent the user from changing the value, set the readonly attribute.

 function onCheck(checkbox) { var entry_date = document.getElementById('entry_date'); var expiration_date = document.getElementById('expiration_date'); if (checkbox.checked) { entry_date.valueAsDate = new Date(); expiration_date.valueAsDate = new Date(); entry_date.setAttribute("readonly", true); expiration_date.setAttribute("readonly", true); } else { entry_date.value = ''; expiration_date.value = ''; entry_date.removeAttribute("readonly"); expiration_date.removeAttribute("readonly"); } }

 Day Guest<br> <input type="checkbox" id="myCheck" name="dayguest" onclick="onCheck(this);"> <!--If checkbox is checked date box is disabled--> <br> <!--Gets today's date and puts it as max--> <label for="entry_date">Arrival Date</label> <input type="date" id="entry_date" name="entry_date"> <br> <label for="expiration_date">Departure Date</label> <input type="date" id="expiration_date" name="expiration_date">