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

StackOverflow https://stackoverflow.com/questions/680241

  •  22-08-2019
  •  | 
  •  

Вопрос

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

<input type="reset" class="button standard" value="Clear" />

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

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

ТИА за любую помощь.

Это было полезно?

Решение

обновлено в марте 2012 года.

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

Для справки, ответ Titi неверен, поскольку это не то, о чем просил исходный постер - правильно, что можно сбросить форму с помощью собственного метода reset () , но этот вопрос пытается очистить форму от запомненных значений, которые остались бы в форме, если вы сбросите ее таким образом.Вот почему необходим "ручной" сброс.Я предполагаю, что большинство людей попали на этот вопрос из поиска Google и действительно ищут метод reset (), но он не работает для конкретного случая, о котором говорит OP.

Мой оригинал ответ был таким:

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

Который может сработать во многих случаях, в том числе для OP, но, как указано в комментариях и в других ответах, очистит элементы radio / checkbox от любых атрибутов value.

Более правильный ответ (но не идеальный) таков:

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

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

Другие советы

От 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="" />

Упс - я использовал это значение!

Вот измененная версия, которая сохранит ваши значения checkbox и radio:

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

document.getElementById('frm').reset()

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

$('#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 селектор, и я не думал о том, чтобы просто удалить атрибут checked .

Я нахожу, что это работает хорошо.

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

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

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

  • Значение по умолчанию для текстовых полей
  • По умолчанию установлены флажки и переключатели
  • Выбрано по умолчанию для выбора параметров

в них хранится значение, которое имело поле при загрузке страницы.

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

Я внес небольшое изменение в Хорошее решение Фрэнсиса Льюиса.Чего не делает его решение, так это устанавливает для выпадающего списка selects значение "пустой".(Я думаю, когда большинство людей хотят "очистить", они, вероятно, хотят сделать все значения пустыми.) Этот делает это с .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 не "сбросил выбранные поля, взял его, вот" моя правка:

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

Я использую решение Паоло Бергантино, которое является отличным, но с небольшими изменениями...В частности, для работы с именем формы вместо идентификатора.

Например:

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

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

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

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

Дополняя принятый ответ, если вы используете плагин 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();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top