Сброс многоступенчатой ​​формы с помощью jQuery

349

У меня есть форма со стандартной кнопкой сброса, закодированной таким образом:

<input type="reset" class="button standard" value="Clear" />

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

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

ТИА за любую помощь.

da5id
источник
1
@ da5id: Нужно иметь в виду, что мой принятый также очищает скрытые элементы! Вы, вероятно, не хотите этого, поэтому просто добавьте: hidden в not()if, если в вашей форме есть скрытые входные данные.
Паоло Бергантино
Спасибо Пауло, очень хороший момент, который я буду иметь в виду.
da5id
2
Для тех, кто ищет хороший ответ, будьте осторожны. Принятый ответ находится на правильном пути, но есть ошибки. Самый проголосовавший ответ на данный момент не понял вопроса. Многие другие ответы также неправильно поняты и сбиты с толку сбросом с пробелом / сбросом .
1
Право Mystkine - и вопрос, и принятый в настоящее время ответ объединяют прояснение со сбросом - я думаю, что спрашивающий действительно искал многоступенчатое решение для сброса форм, несмотря на первоначальный заголовок - я соответственно обновил заголовок.
Ярин
hep hep, несмотря на возраст этого вопроса, я добавил новый ответ, который фактически сбрасывает произвольные части формы ... stackoverflow.com/questions/680241/…
kritzikratzi

Ответы:

502

обновлено в марте 2012 г.

Итак, спустя два года после того, как я первоначально ответил на этот вопрос, я возвращаюсь, чтобы увидеть, что он в значительной степени превратился в большой беспорядок. Я чувствую, что пришло время вернуться к нему и сделать мой ответ действительно правильным, так как он получил наибольшее количество голосов + принят.

Напомним, что ответ Тити неверен, так как это не то, о чем просил оригинальный автор, - верно, что можно сбросить форму, используя собственный метод reset (), но этот вопрос пытается очистить форму от запомненной. значения, которые останутся в форме, если вы сбросите его таким образом. Вот почему требуется «ручной» сброс. Я предполагаю, что большинство людей ответили на этот вопрос из поиска Google и действительно ищут метод reset (), но он не работает для конкретного случая, о котором говорит OP.

Мой оригинальный ответ был такой:

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

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

Более правильный ответ (но не идеальный):

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

Используя :text, :radioи т.д. селекторы самого по себе считается плохой практикой , с помощью JQuery , как они в конечном итоге , вычисляемые , *:textчто делает его занять гораздо больше времени , чем это необходимо. Я предпочитаю подход белого списка и хотел бы использовать его в своем первоначальном ответе. В любом случае, указав inputчасть селектора плюс кэш элемента формы, это должно сделать его наиболее эффективным ответом здесь.

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

Паоло Бергантино
источник
2
Это: ввод удобен ... теперь я знаю, что буду использовать. Спасибо Paolo :) +1
alex
Очень хорошо, ура, но это также очистит значения моих кнопок? Не могу проверить до позже.
da5id
1
На данный момент я думаю, что было бы лучше просто перечислить те, которые вы хотите очистить, поэтому вместо: введите в первой строке, которую вы делаете ": text,: select,: radio,: checkbox"
Paolo Bergantino
3
Проблема здесь в том, что .val('')все значения сбрасываются, ''даже если эти значения используются в переключателях и флажках. Поэтому, когда я запускаю приведенный выше код, я теряю ценную информацию из формы, а не только то, что вводит пользователь.
jeffery_the_wind
3
Кажется, есть одна небольшая проблема с этим решением - ввод: электронная почта - он возвращает ошибку: Ошибка: синтаксическая ошибка, нераспознанное выражение: неподдерживаемое псевдо: электронная почта
Спенсер Марк
390

От http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

настройка myinput.val('')может не эмулировать «сброс» 100%, если у вас есть такой ввод:

<input name="percent" value="50"/>

Например, при вызове myinput.val('')ввода со значением по умолчанию 50 будет задана пустая строка, а при вызове myform.reset()будет сброшено начальное значение 50.

Тити Вангса бин Дамхор
источник
4
спасибо, это отличный способ очистить форму, содержащую: input type = "file".
neoneye
27
Я думаю, что 34 человека неправильно поняли, что за вопрос здесь. Запрашивающий знает о сбросе, форма будет «сброшена» до значений, которые запоминает его сценарий, и он должен принудительно отключить их.
Паоло Бергантино
48

Есть большая проблема с принятым ответом Паоло. Рассматривать:

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

В .val('')строке также будут удалены все valueназначенные флажки и переключатели. Так что если (как и я) вы делаете что-то вроде этого:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

Использование принятого ответа превратит ваши входные данные в:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

К сожалению, я использовал это значение!

Вот модифицированная версия, в которой будут храниться ваш флажок и значения радио:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');
leepowers
источник
1
По некоторым причинам это не работает для меня на selectэлементах. Можете ли вы это исправить?
Pentium10
2
$ (': input,: select', '#myFormId'). removeAttr ('флажок'). removeAttr ('selected'); должен работать
Сахунзай
Это правильный ответ. Если вы используете принятый ответ, форма очищается после отправки. Однако, если вы хотите отправить форму еще раз, ни один из данных вашего флажка или переключателя не будет записан, так как ваши атрибуты значения будут удалены.
djblue2009
Я обновил свой ответ для решения всего это, ваша в основном правильно в стороне от факта JQuery сильно отговаривает использование :text, :passwordи т.д. селекторы самих по себе без указания inputчасти, в противном случае она принимает значение , *:textкоторое проходит через каждый элемент в документе , а не только <input>теги сinput:text
Паоло Бергантино
@ paolo-bergantino Ваша критика неверна. Мои примеры определяют объемы элементов для проверки с использованием #myFormIdконтекста, передаваемого в качестве второго аргумента $()- то есть $(':input', '#context')- это идентично$('#context').filter(':input')
leepowers
16

Плагин jQuery

Я создал плагин jQuery, чтобы я мог легко использовать его везде, где мне это нужно:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

Так что теперь я могу использовать его, позвонив:

$('#my-form').clear();
Фрэнсис Льюис
источник
1
Этот ответ лучший ИМО. Это должно также включать .prop("checked", false)? stackoverflow.com/questions/5874652/prop-vs-attr
Люк
14

Очистка форм немного сложна и не так проста, как кажется.

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

Cherian
источник
$ ( '# form_id') clearForm (). это как раз то, что мне было нужно - спасибо! «Очищает элементы формы. Этот метод очищает все текстовые вводы, вводы паролей и элементы textarea, очищает выделение в любых выбранных элементах и ​​снимает флажки со всех входов радио и флажков». (resetForm, с другой стороны, «сбрасывает форму в исходное состояние, вызывая собственный метод DOM элемента формы».)
Тайлер Рик,
14

document.getElementById ( 'FRM'). сброс ()

STH
источник
11
если вы поклонник jQuery, это можно переписать в: $ ('frm') [0] .reset ()
dmitko
8
@dmitko Просто взгляните на имя пользователя постера
Philipp M
1
Хотя это хорошее решение для сброса формы, на самом деле это не решение вопроса, который задают.
Люк
13

Я обычно делаю:

$('#formDiv form').get(0).reset()

или

$('#formId').get(0).reset()
Рикардо Бин
источник
5

Вот кое-что, чтобы вы начали

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Конечно, если у вас есть флажки / переключатели, вам нужно изменить это, чтобы включить их и установить .attr({'checked': false});

Отредактируйте ответ Паоло более кратко. Мой ответ более многословный, потому что я не знал о :inputселекторе и не думал просто удалить проверенный атрибут.

Алекс
источник
5

Подумайте об использовании плагина проверки - это здорово! И сброс формы прост:

var validator = $("#myform").validate();
validator.resetForm();
dmitko
источник
4

Я считаю, что это работает хорошо.

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});
DampeS8N
источник
за исключением того, что он не работает для флажков, переключателей и выбора.
kritzikratzi
4

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

Тем не менее, есть несколько свойств JavaScript, которые помогают:

  • defaultValue для текстовых полей
  • defaultПроверено на наличие флажков и переключателей
  • defaultSelected для выбора параметров

они хранят значение, которое поле имело при загрузке страницы.

написание плагина jQuery теперь тривиально: (для нетерпеливых ... вот демо http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

плагин-код

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

Применение

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

некоторые заметки ...

  • я не смотрел на новые элементы формы html5, некоторые могут нуждаться в особой обработке, но та же идея должна работать.
  • на элементы нужно ссылаться напрямую. т.е. $( "#container" ).resetValue()не сработает. всегда используйте $( "#container :input" )вместо этого.
  • как уже упоминалось выше, вот демо: http://jsfiddle.net/kritzikratzi/N8fEF/1/
kritzikratzi
источник
4

Вы можете обнаружить, что это на самом деле легче решить без jQuery.

В обычном JavaScript это так просто:

document.getElementById('frmitem').reset();

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

Кен Ле
источник
4

Я немного изменил хорошее решение Фрэнсиса Льюиса . То, что его решение не делает, это устанавливает выпадающий список пустым. (Я думаю, что, когда большинство людей хотят «очистить», они, вероятно, хотят, чтобы все значения были пустыми.) Это делает это с .find('select').prop("selectedIndex", -1).

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};
Люк
источник
2

Я обычно добавляю скрытую кнопку сброса в форму. когда нужно просто: $ ('# reset'). click ();

Альберто Нуньес
источник
1
почему вы отвечаете на пост, на который уже получен ответ, и который был одобрен более 2 лет назад? И в том числе это, ваше сообщение также низкого качества
Рене Пот
это гораздо сложнее, чем прямой вызов form.reset (). нет необходимости в этом взломать.
kritzikratzi
2

Модификация наиболее востребованного ответа для $(document).ready()ситуации:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});
Slawa
источник
2

Просто используйте jQuery Trigger eventтак:

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

Это сбросит флажки, радиокнопки, текстовые поля и т. Д. По сути, это переводит вашу форму в состояние по умолчанию. Просто поместите #ID, Class, elementвнутрь jQueryселектора.

James111
источник
1

это сработало для меня, ответ Pyrotex не «сбросил выбор полей, взял его, вот» мое редактирование:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);
kertal
источник
1

Я использую решение Paolo Bergantino, которое отлично, но с небольшими изменениями ... Специально для работы с именем формы вместо идентификатора.

Например:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Теперь, когда я хочу использовать это может сделать

<span class="button" onclick="jqResetForm('formName')">Reset</span>

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

raphie
источник
1

Я использовал решение ниже, и оно работало для меня (смешивая традиционный javascript с jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})
Марсело Мартинс
источник
1

Я просто посредник в PHP и немного ленив, чтобы погрузиться в новый язык, такой как JQuery, но разве следующее простое и элегантное решение не подходит?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

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

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

Вы просто переопределяете свои значения обратно на то, что должно быть по умолчанию.

Карел
источник
0

Метод, который я использовал в довольно большой форме (более 50 полей), состоял в том, чтобы просто перезагрузить форму с помощью AJAX, по сути сделать обратный вызов серверу и просто вернуть поля с их значениями по умолчанию. Это гораздо проще, чем пытаться захватить каждое поле с помощью JS, а затем установить для него значение по умолчанию. Это также позволило мне хранить значения по умолчанию в одном месте - код сервера. На этом сайте были также различные настройки по умолчанию, в зависимости от настроек учетной записи, и поэтому мне не пришлось беспокоиться об их отправке в JS. Единственная небольшая проблема, с которой мне пришлось столкнуться, - это некоторые предполагаемые поля, которые требовали инициализации после вызова AJAX, но не имели большого значения.

Дэррил Хейн
источник
0

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

Просто добавьте немного CSS, чтобы скрыть кнопку реального сброса.

input[type=reset] { visibility:hidden; height:0; padding:0;}

А потом по своей ссылке добавляешь следующее

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Надеюсь это поможет! A.

Андре Фигейра
источник
0
<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>
Санджай
источник
0

Здесь с обновлением для флажков и выбирает:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');
checkmate711
источник
0

У меня была та же проблема, и пост Паоло помог мне, но мне нужно было кое-что исправить. Моя форма с идентификатором advancedindexsearch содержит только поля ввода и получает значения из сеанса. По какой-то причине следующее не работает для меня:

$("#advancedindexsearch").find("input:text").val("");

Если после этого я поставил предупреждение, я увидел, что значения были удалены правильно, но потом они снова были заменены. Я до сих пор не знаю, как и почему, но следующая строчка сработала для меня:

$("#advancedindexsearch").find("input:text").attr("value","");
gizmo753
источник
0

Ответ Паоло не учитывает выбор даты, добавьте это в:

$form.find('input[type="date"]').val('');
LowGain
источник
0

Я немного улучшил первоначальный ответ Паоло Бергантино

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

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

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

Кроме того, значения входов по умолчанию сохраняются.

beroso
источник
0

вот мое решение, которое также работает с новыми типами ввода html5:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}
Публичных
источник
1
Вы должны двигаться breakниже checkboxи radioслучаев. Там нет необходимости в его нынешнем положении.
bergie3000
0

В дополнение к принятому ответу, если вы используете плагин SELECT2, вам нужно вызвать скрипт select2 для внесения изменений во все поля select2:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }
Марсело Агимовель
источник
-1
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
ммм
источник