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

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

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

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

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

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

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

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

Ответы [ 30 ]

4 голосов
/ 30 июня 2014

Я сделал небольшое изменение Хорошее решение Фрэнсиса Льюиса . То, что его решение не делает, это устанавливает выпадающий список пустым. (Я думаю, что когда большинство людей хотят «очистить», они, вероятно, хотят, чтобы все значения были пустыми.) Этот делает это с .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;
};
4 голосов
/ 08 июля 2011

Вы можете обнаружить, что это на самом деле легче решить без jQuery.

В обычном JavaScript это так просто: 

document.getElementById('frmitem').reset();

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

4 голосов
/ 13 июня 2010

Я считаю, что это хорошо работает. 

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});
2 голосов
/ 15 сентября 2012

Модификация ответа с наибольшим количеством голосов для ситуации $(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();
});
2 голосов
/ 10 октября 2011

Я обычно добавляю скрытую кнопку сброса в форму. когда нужно просто: $ ( '# Сброс') нажмите ().

2 голосов
/ 20 июня 2015

Просто используйте jQuery Trigger event примерно так: 

$('form').trigger("reset");

Это позволит сбросить флажки, радиокнопки, текстовые поля и т. Д. Просто поместите #ID, Class, element в селектор jQuery.

1 голос
/ 28 октября 2011

Я использовал приведенное ниже решение, и оно работало для меня (смешивая традиционный javascript с jQuery) 

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})
1 голос
/ 16 февраля 2011

это сработало для меня, ответ 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);
1 голос
/ 29 августа 2012

Я просто посредник в 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--"; }

Вы просто переопределяете свои значения обратно на те, которые по умолчанию должны быть.

1 голос
/ 13 октября 2011

Я использую решение Paolo Bergantino, которое отлично, но с небольшими изменениями ... Специально для работы с именем формы вместо идентификатора.

Например: 

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 для создания кнопки, страница не будет обновляться при нажатии. Еще раз спасибо Паоло за ваш вклад. Единственная проблема, если у меня есть значения по умолчанию в форме.

Страница:
...