JavaScript заполнить два поля формы сегодняшней датой - PullRequest
0 голосов
/ 07 мая 2020

У меня есть код в JSfiddle . Но двух вещей не бывает. Снятие флажка влияет только на одно поле (entry_date), и когда я отправляю форму, поле expiration_date не записывается в БД - entry_date записывается. Я подстроил сценарий Джерри. Я не знаю ничего насчет JS, поэтому любые советы приветствуются.

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">

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Первая проблема проста: вы забыли назначить expiration_date.value в блоке else.

Вторая проблема заключается в том, что отключенные входные данные не отправляются в формы. Если вы хотите запретить пользователю изменять значение, установите атрибут readonly.

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">
0 голосов
/ 07 мая 2020

Код вашей формы не включен, поэтому я не могу говорить о проблеме с серверной частью / базой данных, но причина, по которой снятие флажка влияет только на одно поле, заключается в том, что ваш оператор else изменяет только одно значение, а не оба:

entry_date.value = '';

Добавление соответствующего оператора для сброса второго поля решит эту проблему:

expiration_date.value = '';

Не имеет отношения к рассматриваемой проблеме, но ваш второй <label> соответствует entry_date вместо expiration_date (исправлено в приведенном ниже фрагменте).

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">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...