Очистить поля формы с помощью jQuery - PullRequest
377 голосов
/ 16 июня 2011

Я хочу очистить все поля ввода и текстовое поле в форме.Это работает следующим образом при использовании кнопки ввода с классом reset:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Это удалит все поля на странице, а не только поля формы.Как бы выглядел мой селектор только для той формы, в которой живет кнопка фактического сброса?

Ответы [ 27 ]

601 голосов
/ 16 июня 2011

Для jQuery 1.6 + :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

Для jQuery <1.6 </strong>:

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

Пожалуйста, смотрите этот пост: Сброс многоступенчатой ​​формы с помощью jQuery

Или

$('#myform')[0].reset();

Как jQuery предлагает :

Для получения иизмените свойства DOM, такие как состояние элементов формы checked, selected или disabled, используйте метод .prop () .

461 голосов
/ 16 июня 2011
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});
147 голосов
/ 17 марта 2013

По какой причине это не следует использовать?

$("#form").trigger('reset');
59 голосов
/ 16 июня 2011

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

Что-то вроде должно работать

$('yourdiv').find('form')[0].reset();
49 голосов
/ 18 октября 2014

если вы используете селекторы и устанавливаете значения для очистки значений, это не сбрасывает форму, а делает все поля пустыми.Сброс состоит в том, чтобы сделать форму такой, какой она была до каких-либо действий пользователя по редактированию после загрузки формы со стороны сервера.Если есть вход с именем «username» и это имя пользователя было предварительно заполнено со стороны сервера, большинство решений на этой странице будут удалять это значение из ввода, а не сбрасывать его до значения, которое было до изменений пользователя.Если вам нужно сбросить форму, используйте это:

$('#myform')[0].reset();

, если вам не нужно сбрасывать форму, но заполните все входные данные некоторым значением, например пустым значением, тогда вы можете использовать большинство решенийиз других комментариев.

28 голосов
/ 03 июня 2014

Просто, но работает как шарм.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS
27 голосов
/ 19 июня 2013

Если кто-то все еще читает эту ветку, вот простейшее решение, использующее не jQuery, а простой JavaScript. Если ваши поля ввода находятся внутри формы, есть простая команда сброса JavaScript:

document.getElementById("myform").reset();

Подробнее об этом здесь: http://www.w3schools.com/jsref/met_form_reset.asp

Ура!

20 голосов
/ 01 июня 2015
$('form[name="myform"]')[0].reset();
15 голосов
/ 16 июня 2011

Почему это вообще нужно делать с любым JavaScript?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords


Сначала пробовал, он не очистит поля со значениями по умолчанию.

Вот способ сделать это с помощью jQuery:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});
11 голосов
/ 28 сентября 2015

У меня есть самый простой трюк для сброса формы

jQuery("#review-form")[0].reset();

или

$("#review-form").get().reset();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...