Сброс многоступенчатой формы с помощью jQuery
У меня есть форма со стандартной кнопкой reset, закодированной таким образом:
<input type="reset" class="button standard" value="Clear" />
Проблема заключается в том, что указанная форма относится к многоэтапной сортировке, поэтому, если пользователь заполняет этап и затем возвращается позже, значения "запоминаемые" для разных полей не будут reset при нажатии кнопки "Очистить".
Я думаю, что привязка функции jQuery к петле над всеми полями и очистка их "вручную" сделала бы трюк. Я уже использую jQuery в форме, но я просто получаю скорость и поэтому не знаю, как это сделать, кроме как индивидуально ссылаясь на каждое поле по идентификатору, что кажется не очень эффективным.
TIA для любой помощи.
Ответы
Ответ 1
обновлен в марте 2012 года.
Итак, через два года после того, как я изначально ответил на этот вопрос, я возвращаюсь, чтобы увидеть, что он в значительной степени превратился в большой беспорядок. Я чувствую это со временем, когда вернусь к нему, и сделаю свой ответ по-настоящему правильным, так как он является самым популярным + принятым.
Для записи ответ Titi неверен, поскольку это не то, что запросил исходный плакат, - правильно, что возможно reset форма, использующая собственный метод reset(), но этот вопрос пытается чтобы очистить форму от запоминаемых значений, которые останутся в форме, если вы reset так. Вот почему требуется "руководство" 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
селектора, а также кеш элемента формы, это должно сделать здесь лучший ответ.
Этот ответ может по-прежнему иметь некоторые недостатки, если люди по умолчанию для избранных элементов не являются опцией, которая имеет пустое значение, но она, конечно, такая же общая, как и она, и это нужно будет обрабатывать на случайном на основе базы данных.
Ответ 2
Из http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea:
$('#myform')[0].reset();
myinput.val('')
может не эмулировать "reset" 100%, если у вас есть такой ввод:
<input name="percent" value="50"/>
Например, вызов myinput.val('')
на входе со значением по умолчанию 50 приведет к пустой строке, тогда как вызов myform.reset()
будет reset до его начального значения 50.
Ответ 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');
Ответ 4
Очистка форм немного сложна и не так проста, как кажется.
Предложите использовать плагин формы jQuery и используйте clearForm или resetForm.
Он заботится о большинстве угловых случаев.
Ответ 5
document.getElementById( 'FRM'). Сброса()
Ответ 6
Плагин 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();
Ответ 7
Я обычно делаю:
$('#formDiv form').get(0).reset()
или
$('#formId').get(0).reset()
Ответ 8
Рассмотрите возможность использования плагина проверки - это здорово! И форма реселлера проста:
var validator = $("#myform").validate();
validator.resetForm();
Ответ 9
Вот что вам поможет.
$('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
, и я не думал просто удалить проверенный атрибут.
Ответ 10
Я считаю, что это хорошо работает.
$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
Ответ 11
Вы можете обнаружить, что это фактически проще решить без jQuery.
В обычном JavaScript это так же просто, как:
document.getElementById('frmitem').reset();
Я стараюсь всегда помнить, что, хотя мы используем jQuery для улучшения и ускорения нашего кодирования, иногда это происходит не быстрее. В таких случаях часто лучше использовать другой метод.
Ответ 12
в принципе, ни одно из предоставленных решений не делает меня счастливым.
как указано несколькими людьми, они пустуют форму, а не перезагружают ее.
однако есть несколько свойств 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/
Ответ 13
Я сделал небольшое изменение приятное решение Francis Lewis. То, что его решение не делает, - это то, что выпадающий список выбирается пустым. (Я думаю, что, когда большинство людей хотят "очистить", они, вероятно, хотят, чтобы все значения были пустыми.) Это делает это с помощью .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;
};
Ответ 14
Обычно я добавляю скрытую кнопку reset в форму.
при необходимости: $ ( '# reset') нажмите().
Ответ 15
Модификация самого голосованного ответа для ситуации $(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();
});
Ответ 16
Просто используйте jQuery Trigger event
так:
$('form').trigger("reset");
Это будут флажки reset, радиокнопки, текстовые поля и т.д.... По сути, это превращает вашу форму в состояние по умолчанию. Просто поставьте #ID, Class, element
внутри селектора jQuery
.
Ответ 17
это сработало для меня, pyrotex answer didn 'reset выбрать поля, взял его, здесь' мое редактирование:
// 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);
Ответ 18
Я использую решение Paolo Bergantino, которое отличное, но с небольшим количеством настроек... В частности, для работы с именем формы вместо id.
Например:
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 для создания кнопки, страница не будет обновляться при нажатии. Еще раз спасибо Паоло за ваш вклад. Единственная проблема, если у меня есть значения по умолчанию в форме.
Ответ 19
Я использовал решение ниже, и это сработало для меня (смешение традиционного javascript с jQuery)
$("#myformId").submit(function() {
comand="window.document."+$(this).attr('name')+".reset()";
setTimeout("eval(comando)",4000);
})
Ответ 20
Я просто являюсь промежуточным звеном в 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--"; }
Вы просто переопределяете свои значения до того, что предполагается по умолчанию.
Ответ 21
Метод, который я использовал в довольно большой форме (поля 50+), состоял в том, чтобы просто перезагрузить форму с помощью AJAX, в основном, обратившись к серверу и просто вернув поля с их значениями по умолчанию. Это сделано намного проще, чем пытаться захватить каждое поле с помощью JS, а затем установить его значение по умолчанию. Это также позволило мне сохранить значения по умолчанию в одном месте - код сервера. На этом сайте также были разные значения по умолчанию в зависимости от настроек учетной записи, поэтому мне не пришлось беспокоиться о том, чтобы отправить их в JS. Единственная небольшая проблема, с которой мне пришлось столкнуться, - это некоторые предлагаемые поля, требующие инициализации после вызова AJAX, но не большая сделка.
Ответ 22
Все эти ответы хороши, но самый простой способ сделать это - поддельный reset, то есть вы используете ссылку и кнопку reset.
Просто добавьте CSS, чтобы скрыть реальную кнопку reset.
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-->
Надеюсь, это поможет!
А.
Ответ 23
<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>
Ответ 24
Здесь с обновлением для флажков и выбора:
$('#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');
Ответ 25
У меня была такая же проблема, и пост Паоло помог мне, но мне нужно было настроить одно. Моя форма с id advancedindexsearch содержит только поля ввода и получает значения из сеанса. По какой-то причине для меня не работало следующее:
$("#advancedindexsearch").find("input:text").val("");
Если после этого я поставил предупреждение, я увидел значения, которые были удалены правильно, а потом они снова заменены. Я до сих пор не знаю, как и почему, но следующая строка сделала для меня трюк:
$("#advancedindexsearch").find("input:text").attr("value","");
Ответ 26
Ответ Paolo не учитывает выбор даты, добавьте это в:
$form.find('input[type="date"]').val('');
Ответ 27
Я немного улучшил исходный ответ Паоло Бергантино
function resetFormInputs(context) {
jQuery(':input', context)
.removeAttr('checked')
.removeAttr('selected')
.not(':button, :submit, :reset, :hidden')
.each(function(){
jQuery(this).val(jQuery(this).prop('defautValue'));
});
}
Таким образом, я могу передать любой элемент контекста функции. Я могу reset всю форму или только определенный набор полей, например:
resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set
Кроме того, значения по умолчанию для ввода сохраняются.
Ответ 28
вот мое решение, которое также работает с новыми типами ввода 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;
}
});
}
Ответ 29
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);