Блог

Здесь у меня есть поле ввода числового типа. Это поле ввода изначально скрыто. Если пользователь нажимает на какой-либо переключатель, то этот ввод отображается.

В этом поле ввода указано значение min max и default . У меня есть два переключателя. Когда я нажимаю на пользовательский переключатель, он отображает поле с номером ввода, и там пользователь может ввести некоторые недопустимые входные данные, так что форма становится недействительной даже после того, как пользователь скроет этот ввод, нажав на переключатель.

Чтобы решить эту проблему, я хочу очистить поле ввода номера и установить его значение по умолчанию, которое 1 находится здесь, если поле ввода становится скрытым?

  <form action=""&&t;
     <label&&t;<input type="radio" value="all" onclick="javascript:chooseTableRows();" name="option" &&t;All</label&&t;<br&&t;
     <label&&t;<input id="custom" value="custom" type="radio" name="option" onclick="javascript:chooseTableRows();"&&t;Custom</label&&t;<br&&t;
     <div id="rows" style="display:none;"&&t;
     <input type="number" name="rows" min="1" value="1" max="10" required&&t;</div&&t;
      <button type="submit" &&t;Submit</button&&t;
   </form&&t;
  

 function chooseTableRows() {
    if (document.&etElementById('custom').checked) {
        document.&etElementById('rows').style.display = 'block';
    }
    else document.&etElementById('rows').style.display = 'none';
}
  

В else просто сбросьте значение на 1, как показано ниже.

 function chooseTableRows() {
    if (document.&etElementById('custom').checked) {
        document.&etElementById('rows').style.display = 'block';
    }
    else {
        document.&etElementById('rows').style.display = 'none';
        document.&etElementsByName('rows')[0].value = 1;
    }

}
  

Вы можете просто использовать .value в вашем else условии и установить его равным 1 , если пользовательский флажок не установлен.

Живая демонстрация

 function chooseTableRows() {
  //check box
  var row = document.&etElementById('rows')
  //Number input
  var custInput = document.&etElementById('number')
  //Check if custom is checked
  if (document.&etElementById('custom').checked) {
    row.style.display = 'block';
  } else {
    row.style.display = 'none';
    custInput.value = 1; //set value to 1
  }
}  

 <form action=""&&t;
  <label&&t;<input type="radio" value="all" onclick="javascript:chooseTableRows();" name="option"&&t;All</label&&t;<br&&t;
  <label&&t;<input id="custom" value="custom" type="radio" name="option" onclick="javascript:chooseTableRows();"&&t;Custom</label&&t;<br&&t;
  <div id="rows" style="display:none;"&&t;
    <input type="number" id="number" name="rows" min="1" value="1" max="10" required&&t;</div&&t;
  <button type="submit"&&t;Submit</button&&t;
</form&&t;