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

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

The .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 form plugin и использовать его clearForm или resetForm функциональность. Он заботится о большинстве угловых случаев.

документ.getElementById ('frm').сброс()

плагин 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();

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

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

edit Паоло более лаконично. Мой ответ более многословен, потому что я не знал о :input селектор, и я не думаю о снятии атрибутом checked.

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

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

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

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

• значение по умолчанию для текстового поля
• defaultChecked для флажков и переключателей
• defaultSelected для select options

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

написание плагина 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() не получится. всегда используйте .
• как уже упоминалось выше, вот демо: 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').нажмите кнопку();

изменение наиболее проголосовавшего ответа за $(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>

я использовал Решение ниже, и это сработало для меня (смешивание традиционного 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-->

надеюсь, что это помогает! А.

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

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