1

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

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

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

<input type="button" value="Очистить" onclick="this.form.elements[\'txt\'].value=\'\'" />
1
  • Что значит «сохраняются в сессии»? Если обычный reset не работает, значит нужно больше подробностей, что это за странная форма такая и как она работает
    – andreymal
    Commented 20 янв. 2018 в 21:18

2 ответа 2

1

Вернуть форму к исходному состоянию:

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

2
  • Вроде бы автор прямым текстом написал, что в его случае reset не работает
    – andreymal
    Commented 20 янв. 2018 в 21:17
  • @andreymal, ну да, но, возможно, это пригодится кому-нибудь другому
    – diralik
    Commented 20 янв. 2018 в 21:18
1

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

<form id="myForm">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="document.getElementById('myForm').reset()" value="reset">
</form>

2
  • Вот так: <input type="button" value="Очистить всё" onclick="document.getElementById(\'artform\').reset();" /> к сожалению, почему-то не работает. Может быть, я ошибся в синтаксисе?
    – Linne
    Commented 20 янв. 2018 в 18:48
  • а зачем вы экранируете одинарные кавычки внутри двойных? Если у вас на странице имеется форма с ID artform, то должно работать! Commented 22 янв. 2018 в 22:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.