Сброс многоступенчатой ​​формы с помощью jQuery - PullRequest
Новая
       189

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

344 голосов
/ 25 марта 2009

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

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

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

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

TIA за любую помощь.

Ответы [ 30 ]

0 голосов
/ 22 октября 2018

В дополнение к принятому ответу, если вы используете плагин 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();
    }
0 голосов
/ 27 августа 2014

вот мое решение, которое также работает с новыми типами ввода 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;
        }
    });
}
0 голосов
/ 25 марта 2009

Метод, который я использовал в довольно большой форме (более 50 полей), состоял в том, чтобы просто перезагрузить форму с помощью AJAX, по сути сделать обратный вызов на сервер и просто вернуть поля с их значениями по умолчанию. Это гораздо проще, чем пытаться захватить каждое поле с помощью JS, а затем установить для него значение по умолчанию. Это также позволило мне хранить значения по умолчанию в одном месте - код сервера. На этом сайте были также различные настройки по умолчанию, в зависимости от настроек учетной записи, и поэтому мне не пришлось беспокоиться об их отправке в JS. Единственная небольшая проблема, с которой мне приходилось сталкиваться, это некоторые подсказки полей, которые требовали инициализации после вызова AJAX, но не имели большого значения.

0 голосов
/ 17 июня 2014

Я немного улучшил первоначальный ответ Паоло Бергантино 

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

Кроме того, значения входов по умолчанию сохраняются.

0 голосов
/ 24 сентября 2011

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

Просто добавьте немного 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.

0 голосов
/ 24 декабря 2013 
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
0 голосов
/ 10 декабря 2013

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

$form.find('input[type="date"]').val('');
0 голосов
/ 08 февраля 2013

У меня была та же проблема, и пост Паоло помог мне, но мне нужно было кое-что исправить. Моя форма с идентификатором advancedindexsearch содержит только поля ввода и получает значения из сеанса. По какой-то причине у меня не сработало следующее: 

$("#advancedindexsearch").find("input:text").val("");

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

$("#advancedindexsearch").find("input:text").attr("value","");
0 голосов
/ 19 декабря 2012

Здесь с обновлением для флажков и выбирает: 

$('#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');
0 голосов
/ 05 апреля 2012 
<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>
Страница:
...