Функция jQuery/Javascript для очистки всех полей формы

Ответ 1

Примечание: этот ответ имеет значение для сброса полей формы, а не для очистки полей - см. обновление.

Вы можете использовать встроенный JavaScript reset() до reset всю форму до состояния по умолчанию.

Пример, предоставленный Райан:

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

Примечание. Это может не быть reset определенные поля, например type="hidden".

UPDATE

Как отмечено IlyaDoroshin, то же самое можно сделать, используя jQuery trigger():

$('#myForm').trigger("reset");

UPDATE

Если вам нужно сделать больше, чем reset формы до состояния по умолчанию, вы должны просмотреть ответы на Сброс многоступенчатой ​​формы с помощью jQuery.

Ответ 2

В reset форму (но не очистить форму) просто запускайте событие reset:

$('#form').trigger("reset");

Чтобы очистить форму, см. другие ответы.

Ответ 3

Нечто похожее на $( "# formId" ). reset() не очистят элементы формы, у которых их значения по умолчанию установлены на нечто, отличное от ". Один из способов, которым это может случиться, - это представление предыдущей формы. После того, как форма была отправлена ​​ reset(), значения формы" reset "будут переданы ранее отправленным, что, вероятно, не будет" ".

Один из вариантов по-настоящему очистить форму, а не просто reset it, - вызвать такую ​​функцию:

function clearForm()
{
    $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $(':checkbox, :radio').prop('checked', false);
}

Когда я изначально пришел на эту страницу, мне нужно было решение, которое учитывало бы изменение форм по умолчанию и все еще способно очистить все элементы ввода.

Ответ 4

Установите для параметра val значение ""

function clear_form_elements(ele) {

        $(ele).find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });

    }

<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />  
<input onclick="clear_form_elements('#example_1')" type="button" value="Clear Section 1" />
<input onclick="clear_form_elements('#example_2')" type="button" value="Clear Section 2" />
<input onclick="clear_form_elements('#example_3')" type="button" value="Clear Section 3" />

Вы также можете попробовать что-то вроде этого:

  function clearForm(form) {

    // iterate over all of the inputs for the form

    // element that was passed in

    $(':input', form).each(function() {

      var type = this.type;

      var tag = this.tagName.toLowerCase(); // normalize case

      // it ok to reset the value attr of text inputs,

      // password inputs, and textareas

      if (type == 'text' || type == 'password' || tag == 'textarea')

        this.value = "";

      // checkboxes and radios need to have their checked state cleared

      // but should *not* have their 'value' changed

      else if (type == 'checkbox' || type == 'radio')

        this.checked = false;

      // select elements need to have their 'selectedIndex' property set to -1

      // (this works for both single and multiple select elements)

      else if (tag == 'select')

        this.selectedIndex = -1;

    });

  };

Подробнее здесь и здесь

Ответ 5

    <form id="form" method="post" action="action.php">
      <input type="text" class="removeLater" name="name" /> Username<br/>
      <input type="text" class="removeLater" name="pass" /> Password<br/>
      <input type="text" class="removeLater" name="pass2" /> Password again<br/>
    </form>
    <script>
$(function(){
    $("form").submit(function(e){
         //do anything you want
         //& remove values
         $(".removeLater").val('');
    }

});
</script>

Ответ 6

Вы можете просто использовать тип кнопки reset.

<input type="text" />
<input type="reset" />

jsfiddle

Изменить: Помните, что кнопка reset, reset форма для исходных значений, поэтому, если поле имеет некоторое значение, заданное в поле <input type="text" value="Name" /> после нажатия reset поле будет reset значением, вставленным пользователем, и вернемся со словом "имя" в этом примере.

Ссылка: http://api.jquery.com/reset-selector/

Ответ 7

Я использую следующее решение:

1) Настройка Плагин проверки JQuery

2) Тогда:

$('your form selector').resetForm();

Ответ 8

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

$.fn.resetForm = function() {
    return this.each(function(){
        this.reset();
    });
}

Тогда просто назовите это что-то вроде этого

$('#divwithformin form').resetForm();

или

$('form').resetForm();

и, конечно, вы все равно можете использовать его в цепочке

$('form.register').resetForm().find('input[type="submit"]').attr('disabled','disabled')

Ответ 9

Будет что-то вроде работы?

Закрытая форма JQuery на закрытии

Ответ 10

function reset_form() {
 $('#ID_OF_FORM').each (function(){  
    this.reset();
 }); 
}

Ответ 11

HTML

<form id="contactform"></form>

JavaScript

 var $contactform = $('#contactform')
    $($contactform).find("input[type=text] , textarea ").each(function(){
                $(this).val('');            
    });

Простая и короткая функция для очистки всех полей