Кнопка очистки всех полей формы

258
22 января 2018, 09:43

Есть обычная форма. Значения сохраняются в сессии и не удаётся её очистить при помощи стандартного <input type="reset" />.

Подскажите пожалуйста как при помощи javascript очистить всю форму?

Вот эта кнопка, очищает только поле «txt».

<input type="button" value="Очистить" onclick="this.form.elements[\'txt\'].value=\'\'" />
Answer 1

У объекта формы вызвать метод reset https://www.w3schools.com/jsref/met_form_reset.asp

Answer 2
Вернуть форму к исходному состоянию:
  • Используя <input type="reset">:

<form> 
  <p>Введите что-нибудь в поля:</p> 
  <input> 
  <input> 
  <input type="reset" value="Очистить форму"> 
</form>

  • Либо, используя обычную кнопку, повесив обработчик на неё, который будет вызывать метод reset формы:

let form = document.getElementById('form'); 
let button = document.getElementById('button'); 
button.addEventListener('click', () => form.reset());
<form id="form"> 
  <p>Введите что-нибудь в поля:</p> 
  <input> 
  <input> 
  <button type="button" id="button">Очистить</button> 
</form>

Очистить все поля формы:
  • Получаем все поля формы используя метод getElementsByTagName
  • итерируемся по ним, используя for...of
  • присваиваем атрибуту .value поля пустую строку

function clearAllFormInputs() { 
  let form = document.getElementById('form'); 
  let inputs = form.getElementsByTagName('input'); 
  for (let input of inputs) 
    input.value = ''; 
} 
 
let button = document.getElementById('button'); 
button.addEventListener('click', clearAllFormInputs);
<form id="form"> 
  <input value="текст1"> 
  <input value="текст2"> 
  <button id="button">Очистить</button> 
</form>

READ ALSO
timeout between dbclick and click events

timeout between dbclick and click events

У меня есть два ивента на одном и том же объекте(видео) с функциями:

264
Очистка формы javascript

Очистка формы javascript

Есть кнопка, которая очищает конкретное поле формы, вот она:

232
Бегущая строка без использования тега &lt;marquee&gt;

Бегущая строка без использования тега <marquee>

Как можно создать бегущую строку на javascript? Текст, который надо показывать предварительно вводится пользователем и потому может быть любой...

323
Recaptcha invisible

Recaptcha invisible

При подключении recaptcha invisible, необходимо указывать параметр data-callback, можно стандартно в колбек функции сделать сабмит определенной формыНо...

267