Сброс многоступенчатой формы c помощью jQuery
У меня есть форма со стандартной кнопкой сброса, закодированной таким образом:
<input type="reset" class="button standard" value="Clear" />
проблема в том, что эта форма имеет многоступенчатую сортировку, поэтому, если пользователь заполняет этап, а затем возвращается позже, "запомненные" значения для различных полей не будут сброшены при нажатии кнопки "Очистить".
Я думаю, что присоединение функции jQuery к циклу по всем полям и их очистка "вручную" сделают трюк. Я уже использую jQuery в форме, но только встаю чтобы ускорить и поэтому не уверен, как это сделать, кроме индивидуальной ссылки на каждое поле по ID, что не кажется очень эффективным.
TIA для любой помощи.
29 ответов
Обновлено в марте 2012 года.
Итак, через два года после того, как я первоначально ответил на этот вопрос, я вернулся, чтобы увидеть, что он в значительной степени превратился в большой беспорядок. Я чувствую, что пришло время вернуться к нему и сделать мой ответ действительно правильным, так как он наиболее одобрен + принят.
для записи ответ Titi неверен, поскольку это не то, что просил оригинальный плакат - правильно, что можно сбросить форму с помощью собственного метода 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
, etc. селекторы сами по себе считаются плохой практикой jQuery, поскольку они в конечном итоге оценивают *:text
что делает его принять гораздо длиннее чем оно должно. Я предпочитаю подход белого списка и хотел бы использовать его в своем первоначальном ответе. Абы, путем указания input
часть селектора, плюс кэш элемента формы, это должно сделать его наиболее эффективным ответом здесь.
этот ответ может по-прежнему иметь некоторые недостатки, если значение по умолчанию для select elements не является параметром с пустым значением, но он, безусловно, является общим, как он собирается получить, и это должно быть обработано на индивидуальной основе.
от 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="" />
Oops-я использовал это значение!
вот измененная версия, которая сохранит ваш флажок и радио значения:
// 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 функциональность. Он заботится о большинстве угловых случаев.
плагин 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();
рассмотрите возможность использования плагин проверки - это здорово! И форма сброса проста:
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()
не получится. всегда используйте . - как упоминалось выше, вот демо: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;
};
модификация наиболее проголосовавшего ответа для $(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 answer 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);
Я использую решение Паоло Бергантино, которое отлично, но с несколькими настройками... В частности, для работы с именем формы вместо 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 для создания кнопки, страница не будет обновляться при нажатии. Еще раз спасибо Паоло за Ваш вклад. Единственная проблема-если у меня есть значения по умолчанию в форма.
я использовал приведенное ниже решение, и оно сработало для меня (смешивание традиционного 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. Единственной небольшой проблемой, с которой мне пришлось иметь дело, были некоторые поля suggest, которые требовали инициализации после вызова 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-->
надеюсь, что это помогает! А.
<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');
у меня была та же проблема, и пост Паоло помог мне, но мне нужно было настроить одну вещь. Моя форма с id advancedindexsearch содержит только поля ввода и получает значения из сеанса. Почему-то у меня не получилось следующее:--3-->
$("#advancedindexsearch").find("input:text").val("");
Если я поставлю предупреждение после этого, я видел значения, где удалены правильно, но затем они снова заменены. Я до сих пор не знаю, как и почему, но следующая строка сделала трюк для меня:
$("#advancedindexsearch").find("input:text").attr("value","");
Я немного улучшил оригинальный ответ Паоло Бергантино
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;
}
});
}