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

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

 

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

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

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

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

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

    На странице http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

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

      

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

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

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

    Линия .val('') также очистит любое 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 и используйте его функции clearForm или resetForm . Он заботится о большинстве случаев в углу.

    document.getElementById ( ‘FRM’). сброс ()

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

    Обычно я делаю:

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

    или

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

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

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

    Вот вам, чтобы вы начали

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

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

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

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

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

    • defaultValue для текстовых полей
    • defaultChecked для флажков и переключателей
    • 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 ответил didn ‘reset select fields, взял его, здесь’ мое редактирование:

     // 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, которое отлично, но с небольшим количеством настроек … В частности, для работы с именем формы вместо id.

    Например:

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

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

     Reset 

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

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

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

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

       

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

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

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

     Reset form  

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

      

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

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

    У меня была такая же проблема, и пост Паоло помог мне, но мне нужно было настроить одно. Моя форма с id 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; } }); } 
     $(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true); 
    Давайте будем гением компьютера.