Скидання багатоетапної форми за допомогою jQuery

У мене форма, кодована таким чином стандартною кнопкою скидання:

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

Проблема полягає в тому, що зазначена форма є багатоступеневою, тому якщо користувач заповнює етап і потім повертається пізніше, значення "запам'ятовуються" для різних полів не скидаються після натискання кнопки Очистити.

Я думаю, що приєднання функції jQuery для циклічного перегляду всіх полів та очищення їх "вручну" зробить трюк. Я вже використовую jQuery у формі, але я лише швидко набираю швидкість, тому я не впевнений, як це зробити, окрім індивідуального посилання кожного поля за ідентифікатором, що не здається дуже ефективним.

TIA за будь-яку допомогу.

оновлено березень 2012 року.

Отож, через два роки після того, як я спочатку відповів на це запитання, я повернувся до переконання, що він значною мірою перетворився на великий безлад. Я вважаю, що прийшов час повернутися до нього і зробити свою відповідь по-справжньому правильною, оскільки вона є найбільш прихильним + прийнятим.

Для запису відповідь Тіті неправильна, оскільки це не те, про що вимагав оригінальний плакат - це правильно, що можна скинути форму за допомогою нативного методу скидання (), але це питання намагається очистити форму від пам'яті значення, які залишаться у формі, якщо ви скинете її таким чином. Ось чому потрібен «ручний» скидання. Я припускаю, що в цьому питанні більшість людей опинилися в пошуку Google і справді шукають метод скидання (), але це не працює для конкретного випадку, про який йдеться в ОП.

Моя оригінальна відповідь була така:

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

Що може працювати в багатьох випадках, в тому числі в рамках ОП, але, як зазначено в коментарях та інших відповідях, очистить елементи радіо / прапорців від будь-яких атрибутів значення.

Більш правильна відповідь (але не досконала):

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

Ця відповідь може все-таки мати деякі недоліки, якщо за замовчуванням людей для вибраних елементів не є параметром, який має порожнє значення, але він, звичайно, такий же загальний, як і збирається отримати, і це потрібно вирішувати у кожному конкретному випадку. .

З 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="" />

На жаль, я використовував це значення!

Ось модифікована версія, яка зберігатиме прапорці та значення радіо:

// 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 і використовувати його функцію clearForm або resetForm . Він піклується про більшість кутових справ.

document.getElementById ('frm'). скинути ()

Я зазвичай роблю:

$('#formDiv form').get(0).reset()

або

$('#formId').get(0).reset()

Ось з чого можна розпочати роботу

$('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селектор, і не думав про просто видалення перевіреного атрибута.

Подумайте про використання плагіна для перевірки - це чудово! А перевстановити форму просто:

var validator = $("#myform").validate();
validator.resetForm();

Я вважаю, що це працює добре.

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

в основному жодне із запропонованих рішень не робить мене щасливим. як вказують кілька людей, вони випорожнюють форму, а не скидають її.

проте є кілька властивостей javascript, які допомагають:

• defaultValue для текстових полів
• за замовчуваннямПеревірено для прапорців та перемикачів
• за замовчуваннямВибрані параметри вибору

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

написання плагіна 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 для покращення та прискорення кодування, іноді це насправді не швидше. У цих випадках часто краще використовувати інший метод.

Я зробив невелику варіацію приємного рішення Френсіса Льюїса . Що його рішення не робить - це встановити спадне меню, яке вибирається порожнім. (Я думаю, коли більшість людей хочуть "очистити", вони, ймовірно, хочуть зробити всі цінності порожніми.) Це робить це .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'). click ();

Модифікація найбільш голосової відповіді на $(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);

Я використовую рішення 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 для створення кнопки, сторінка не буде оновлена ​​при натисканні. Ще раз дякую Паоло за ваш внесок. Єдина проблема - якщо у мене є значення за замовчуванням у формі.

Я використав рішення нижче, і воно працювало для мене (змішування традиційного 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. Єдине невелике питання, з яким мені довелося зіткнутися, були деякі поля, які пропонують ініціалізацію після виклику 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');

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