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

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

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

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

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

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

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

От 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.

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

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

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

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

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

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

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

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

или

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

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

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

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

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

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

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

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

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

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

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

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

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

Я немного изменил хорошее решение Фрэнсиса Льюиса . То, что его решение не делает, это устанавливает выпадающий список пустым. (Я думаю, что, когда большинство людей хотят «очистить», они, вероятно, хотят, чтобы все значения были пустыми.) Это делает это с .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;
};

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

Модификация наиболее востребованного ответа для $(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();
});

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

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

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

это сработало для меня, ответ 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);

Я использую решение 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 для создания кнопки, страница не будет обновляться при нажатии. Еще раз спасибо Паоло за ваш вклад. Единственная проблема, если у меня есть значения по умолчанию в форме.

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

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

Я просто посредник в 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--"; }

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

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

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

Просто добавьте немного 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.

<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>

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

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

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

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

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

$("#advancedindexsearch").find("input:text").attr("value","");

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

$form.find('input[type="date"]').val('');

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

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

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

вот мое решение, которое также работает с новыми типами ввода 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;
        }
    });
}

В дополнение к принятому ответу, если вы используете плагин 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();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);