Сброс многоступенчатой формы 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 функциональность. Он заботится о большинстве угловых случаев.


документ.getElementById ('frm').reset ()


плагин 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() не получится. всегда используйте .
  • как упоминалось выше, вот демо: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').нажмите кнопку();


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

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

$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);