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

Из http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea:

$('#myform')[0].reset();

myinput.val('') может не эмулировать "reset" 100%, если у вас есть такой ввод:

<input name="percent" value="50"/>

Например, вызов myinput.val('') на входе со значением по умолчанию 50 приведет к пустой строке, тогда как вызов myform.reset() будет 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();

document.getElementById( 'FRM'). Сброса()

Очистка форм немного сложна и не так проста, как кажется.

Предложите использовать плагин формы jQuery и используйте clearForm или resetForm. Он заботится о большинстве угловых случаев.

Я обычно делаю:

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

или

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

Рассмотрите возможность использования плагина проверки - это здорово! И форма реселлера проста:

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

Я сделал небольшое изменение приятное решение Francis Lewis. То, что его решение не делает, - это то, что выпадающий список выбирается пустым. (Я думаю, что, когда большинство людей хотят "очистить", они, вероятно, хотят, чтобы все значения были пустыми.) Это делает это с помощью .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;
};

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

однако есть несколько свойств 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() не будет работать. всегда используйте $( "#container :input" ).
• как упоминалось выше, вот демо: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Вы можете обнаружить, что это фактически проще решить без jQuery.

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

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

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

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

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

Вот что вам поможет.

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

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

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

Это будут флажки reset, радиокнопки, текстовые поля и т.д.... По сути, это превращает вашу форму в состояние по умолчанию. Просто поставьте #ID, Class, element внутри селектора jQuery.

Модификация самого голосованного ответа для ситуации $(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();
});

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

Я просто являюсь промежуточным звеном в 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--"; }

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

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

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

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

это сработало для меня, pyrotex answer didn 'reset выбрать поля, взял его, здесь' мое редактирование:

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

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

Я немного улучшил исходный ответ Паоло Бергантино

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

Таким образом, я могу передать любой элемент контекста функции. Я могу reset всю форму или только определенный набор полей, например:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

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

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

$form.find('input[type="date"]').val('');

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

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

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

$("#advancedindexsearch").find("input:text").attr("value","");

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

$('#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');

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

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

Просто добавьте CSS, чтобы скрыть реальную кнопку reset.

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

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

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

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);