Очистить поля формы с помощью jQuery


402

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

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

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


Проверьте ответ Паоло Бергантино stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
Злой кодер

2
Более подробный способ сброса формы здесь .
Узбекджон

Ответы:


487
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

49
Не забывайте свои input[type=password]поля.
SammyK

64
Этот ответ охватывает оригинальный вопрос. Тем, кто хочет больше, чем просто текстовые поля, очевидно, нужно будет добавлять код по мере необходимости ...
ShaneBlake

2
также помните, что в HTML5 будет больше типов ввода, кроме type = password (как сказал SammyK): type = url, type = digits, type = email и т. д. http://www.w3.org/TR/html5/forms .html # state-of-the-type-attribute
Габриэль

6
Небольшой совет: этот селектор не будет выбирать элементы ввода, основанные на неявном type = text, вы должны явно включить type = text в вашу разметку. Это может быть очевидно, но это было не для меня, только сейчас :-)
Эльбин

2
@CaptSaltyJack: Это сбрасывает их к значениям по умолчанию, что не то же самое, что их очистка ...
ShaneBlake

629

Для jQuery 1.6+ :

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

Для jQuery <1.6 :

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

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

Или

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

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

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


3
Первый фрагмент кода установит значения флажков на «» вместо того, чтобы просто снимать их. И это не повлияет на выбор, потому что это выбор тегов.

6
чтобы избежать удаления значений флажка, я использовал следующее, вдохновленное ваш ответ: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');. Это удалит значения по умолчанию (то есть value="something", но не для флажков или выбора.
Jeppe Mariager-Lam

17
НЕ ИСПОЛЬЗУЙТЕ ЭТО (вариант 1), если у вас есть радио, флажки или выбор, вы потратите много времени на поиск странной ошибки после того, как их значения исчезнут. Правильная версия, которая оставляет их значения без изменений: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');(на основе комментария Джеппе Мариажера-Лама)
Константин Переяслов

8
Есть ли причина избегать второго варианта?
Rineez

6
Ваше второе решение является актуальным ответом
abzarak

159

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

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

17
@ pythonian29033: и с вашим подходом вы сбросите ВСЕ формы на странице к значениям по умолчанию ... что, безусловно, НЕ то, что хочет обычный разработчик. Я думаю, что разработчик jQuery должен обратить внимание на тот факт, что ему / ей нужно изменить селектор с примера кода на соответствующий ...
Sk8erPeter

8
@ Sk8erPeter Если у вас есть несколько элементов на странице с идентификатором form, вы делаете это неправильно. Вы были бы правы, если бы селектор был form, но это скорее селектор ID #form.
Brandones

@brandones: Вы должны были обратить внимание на то, на что вы отвечали, потому что вы не правы ... :) Проверьте код, который написал pythonian29033 (на который я отвечал ранее): $("form").trigger('reset');действительно вызывает событие "reset" на ВСЕХ <form>элементах. В большинстве случаев это может быть неправильно. Но $("#form").trigger('reset');(показано в исходном ответе) только вызывает событие «сброса» для элемента, у которого установлен идентификатор «формы» (достижимый с помощью #formселектора). И да, один идентификатор должен использоваться только один раз, поэтому они называют его «идентификатор», потому что он однозначно идентифицирует один элемент.
Sk8erPeter

61

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

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

$('yourdiv').find('form')[0].reset();

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

51

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

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

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


29

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

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

14
За исключением того, что это не очищает поля. Это устанавливает их по умолчанию.
Марк Фрейзер

29

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

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

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

Ура!


Как говорится. Он сбрасывает значение в начальной форме и не очищает значения. Но да, если вы загрузили форму со значениями по умолчанию, они не будут очищены. Вероятно, цикл JS, который проходит через все входы и очищает их
Tarmo Saluste


17

Почему это нужно делать с любым 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('');
});

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

Есть еще одна причина, по которой вам часто нужен JavaScript для этого. Форма не может быть «формой» вообще. Например, ваша форма на самом деле является просто набором входных данных для приложения Backbone.js / Ember.js / AngularJS, и данные никогда не будут отправляться на сервер как традиционная форма, но должны обрабатываться строго на стороне клиента JavaScript. В таких случаях нет формы для перезагрузки.
Джон Мунш

3
.live()устарела, а также медленно / ненужно. Вы можете просто использовать .bind()или .on().
Кевин Бил

14

Если вы хотите очистить все поля ввода независимо от их типа, то шаг за шагом

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

12

Я получил самый простой трюк для сброса формы

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

или

$("#review-form").get().reset();

12

С Javascript вы можете просто сделать это с помощью этого синтаксиса getElementById("your-form-id").reset();

Вы также можете использовать jquery, вызывая функцию сброса таким образом $('#your-form-id')[0].reset();

Помните, чтобы не забыть [0]. Вы получите следующую ошибку, если

Ошибка типа: $ (...). Сброс не является функцией

JQuery также предоставляет событие, которое вы можете использовать

$ ( '# Form_id') триггер ( "сброс").

Я пытался, и это работает.

Примечание: важно отметить, что эти методы только сбрасывают вашу форму к ее начальному значению, установленному сервером при загрузке страницы. Это означает, что если ваш ввод был установлен на значение 'set value' до того, как вы сделали случайное изменение, поле будет сброшено на то же значение после вызова метода reset.

Надеюсь, поможет


7
$('#editPOIForm').each(function(){ 
    this.reset();
});

где editPOIFormявляется idатрибутом формы.


2
Там будет только один, #editPOIFormи поэтому .each()метод не имеет смысла. Даже если вы добавите этот идентификатор в несколько форм, он вернет только одну из них.
Кевин Бил

1
Функция each () позволяет вам использовать this (вместо $ (this)), чтобы получить доступ к базовому объекту DOM, и вызывать reset (). Предполагая, что вы хотите сбросить значения по умолчанию, вместо того, чтобы очистить все, это хорошее решение.
Дэйв

@Dave Might, а также просто использовать$('#editPOIForm').get(0).reset();
Томас Daugaard

2
@ThomasDaugaard: за исключением того, что если вы используете get (0) или просто $ ('# editPOIForm') [0], вы получите сообщение об ошибке сценария, если $ ('# editPOIForm') не соответствует ни одному элементу, тогда как каждый () завершится неудачно без ошибка. Так что, я полагаю, это зависит от ваших приоритетов в отношении обработки ошибок.
Дэйв


6

Протестированный и проверенный код:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript должен быть включен, $(document).readyи это должно быть с вашей логикой.


5

Самое простое и лучшее решение -
$("#form")[0].reset();

Не используйте здесь -
$(this)[0].reset();


Небольшое предупреждение: если у вас есть значения по умолчанию для входных данных, скажем, отрисованные сервером, то form.reset();вы вернетесь к этим значениям и не очистите входные данные.
Evil_Bengt

4

Допустим, если вы хотите очистить поля и, кроме accountType, в раскрывающемся списке среднее время будет сброшено определенное значение, т. Е. «Все». Остальные поля должны быть сброшены на пустое, т. Е. Текстовое поле. Этот подход будет использоваться для очистки конкретные поля как наше требование.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Самый полный ответ. Спасибо.
RationalRabbit

Один вопрос: как бы вы направили это к определенной форме, если бы вы делали это программно, а не нажатием кнопки?
RationalRabbit


3

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

setTimeout("reset_form()",2000);

И написать эту функцию из сайта jQuery на готовом документе

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

3

Некоторые из вас жаловались на то, что радиостанции и тому подобное очищены от «проверенного» состояния по умолчанию ... Все, что вам нужно сделать, это добавить переключатели: radio,: в поле .not, и проблема решена.

Если вы не можете заставить все другие функции сброса работать, эта будет.

  • Адаптировано из ответа ngen

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }

2
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 
  1. frmID это идентификация формы
  2. OnSuccessоперации мы вызываем функцию JavaScript с именем " ClearInput"

    <script type="text/javascript">
        function ClearInput() {
            //call action for render create view
            $("#frmID").get(0).reset();
        }
    </script>
  3. если вы оба сделаете это правильно, то вы не сможете остановить его от работы ...


1

Следующий код очищает всю форму, и ее поля будут пустыми. Если вы хотите очистить только определенную форму, если страница содержит более одной формы, укажите идентификатор или класс формы.

$("body").find('form').find('input,  textarea').val('');

0

Если я хочу очистить все поля, кроме accountType .. Используйте следующее

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

1
Вы не хотите терять значения для флажков в радиокнопках, а только снимать их, это не хорошее решение
Frankey

0

код, который я вижу здесь и на связанных с этим вопросах, кажется неполным.

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

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Пожалуйста, дайте мне знать, если я что-то упустил или что-то может быть улучшено.


0

Ничто из вышеперечисленного не работает в простом случае, когда страница содержит вызов пользовательского веб-элемента управления, который включает обработку запроса IHttpHandler (капчу). После отправки requsrt (для обработки изображений) приведенный ниже код не очищает поля в форме (перед отправкой запроса HttpHandler), все работает правильно.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

0

Я написал универсальный плагин JQuery:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>


-2

Добавьте скрытую кнопку сброса следующим образом

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.