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

Question

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

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

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

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

TIA за любую помощь.

Answer 1

обновлено в марте 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 часть селектора плюс кеш элемента формы, это должно сделать его наиболее эффективным ответом здесь.

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

Answer 2

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

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

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

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

* 1008.

Answer 3

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

$(':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');

Answer 4

Плагин 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();

Answer 5

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

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

Answer 6

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

Answer 7

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

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

или

$('#formId').get(0).reset()

Answer 8

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

var validator = $("#myform").validate();
validator.resetForm();

Answer 9

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

однако, есть несколько свойств 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/

Answer 10

Вот кое-что, с чего можно начать

$('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, и при этом я не думал просто удалить проверенный атрибут.