Сброс многоступенчатой формы с помощью jQuery
У меня есть форма со стандартной кнопкой сброса, закодированной таким образом:
<input type="reset" class="button standard" value="Clear" />
Проблема в том, что указанная форма имеет многоэтапную сортировку, поэтому, если пользователь заполняет этап и затем возвращается позже, "запомненные" значения для различных полей не будут сброшены при нажатии кнопки "Очистить".
Я думаю, что присоединение функции jQuery для зацикливания всех полей и очистки их "вручную" поможет. Я уже использую jQuery в форме, но только набираю скорость, и поэтому не уверен, как это сделать, кроме индивидуальной ссылки на каждое поле по идентификатору, что не очень эффективно.
ТИА за любую помощь.
31 ответ
обновлено в марте 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. Он заботится о большинстве угловых случаев.
Я обычно делаю:
$('#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 селектор, и я не думал просто удалить проверенный атрибут.
Я немного изменил хорошее решение Фрэнсиса Льюиса. То, что его решение не делает, это устанавливает выпадающий список пустым. (Я думаю, что когда большинство людей хотят "очистить", они, вероятно, хотят сделать все значения пустыми.) Это делает это с .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;
};
Просто используйте jQuery Trigger event вот так:
$('form').trigger("reset");
Это сбросит флажки, радиокнопки, текстовые поля и т. Д. По сути, это переводит вашу форму в состояние по умолчанию. Проще говоря #ID, Class, element внутри jQuery селектор.
Вы можете обнаружить, что это на самом деле легче решить без jQuery.
В обычном JavaScript это так просто:
document.getElementById('frmitem').reset();
Я стараюсь всегда помнить, что, хотя мы используем jQuery для улучшения и ускорения нашего кодирования, иногда это на самом деле не быстрее. В этих случаях часто лучше использовать другой метод.
В принципе ни одно из предложенных решений не делает меня счастливым. как указали несколько человек, они очищают форму, а не сбрасывают ее.
Тем не менее, есть несколько свойств 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/
Я считаю, что это хорошо работает.
$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
Я обычно добавляю скрытую кнопку сброса в форму. когда нужно просто: $('#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();
});
У меня это сработало, ответ 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);
Я использовал решение ниже, и оно работало для меня (смешивая традиционный javascript с jQuery)
$("#myformId").submit(function() {
comand="window.document."+$(this).attr('name')+".reset()";
setTimeout("eval(comando)",4000);
})
Я использую решение 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 для создания кнопки, страница не будет обновляться при нажатии. Еще раз спасибо Паоло за ваш вклад. Единственная проблема, если у меня есть значения по умолчанию в форме.
Я просто посредник в 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--"; }
Вы просто переопределяете свои значения обратно на то, что должно быть по умолчанию.
У меня была та же проблема, и пост Паоло помог мне, но мне нужно было кое-что исправить. Моя форма с идентификатором advancedindexsearch содержит только поля ввода и получает значения из сеанса. По какой-то причине следующее не работает для меня:
$("#advancedindexsearch").find("input:text").val("");
Если после этого я поставил оповещение, я увидел, что значения были удалены правильно, но потом они снова были заменены. Я до сих пор не знаю, как и почему, но следующая строчка сработала для меня:
$("#advancedindexsearch").find("input:text").attr("value","");
Все эти ответы хороши, но самый простой способ сделать это с помощью фальшивого сброса, то есть вы используете ссылку и кнопку сброса.
Просто добавьте немного 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.
Здесь с обновлением для флажков и выбирает:
$('#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');
Я немного улучшил первоначальный ответ Паоло Бергантино
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
Кроме того, значения входов по умолчанию сохраняются.
Метод, который я использовал в довольно большой форме (более 50 полей), состоял в том, чтобы просто перезагрузить форму с помощью AJAX, по сути сделать обратный вызов серверу и просто вернуть поля с их значениями по умолчанию. Это гораздо проще, чем пытаться захватить каждое поле с помощью JS, а затем установить для него значение по умолчанию. Это также позволило мне хранить значения по умолчанию в одном месте - код сервера. На этом сайте были также различные настройки по умолчанию в зависимости от настроек учетной записи, и поэтому мне не пришлось беспокоиться об отправке их в JS. Единственная небольшая проблема, с которой мне пришлось столкнуться, это некоторые подсказки полей, которые требовали инициализации после вызова AJAX, но это не имеет большого значения.
<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>
Небольшое обновление ответа paolo, чтобы соответствовать новым типам ввода, таким как «тел» и электронная почта, следующий фрагмент кода также выберет эти типы:
function resetForm(form) {
form.find('input:text, input[type=email], input[type=tel], input:password, input:file, select, textarea').val('');
form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
Ответ Паоло не учитывает выбор даты, добавьте это в:
$form.find('input[type="date"]').val('');
Вот мое решение, которое также работает с новыми типами ввода 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();
}