Resetowanie formularza wielostopniowego za pomocą jQuery

Z http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea : {]}

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

Ustawienie myinput.val('') może nie emulować" reset " 100%, jeśli masz takie wejście:

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

Np wywołanie myinput.val('') na wejściu o domyślnej wartości 50 ustawiłoby go na pusty łańcuch, podczas gdy wywołanie myform.reset() zresetowałoby go do wartości początkowej 50.

Jest duży problem z zaakceptowaną odpowiedzią Paolo. Consider:

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

The .val('') Linia wyczyści również wszystkie value przypisane do pól wyboru i przycisków opcji. Więc jeśli (jak ja) zrobisz coś takiego:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

Użycie zaakceptowanej odpowiedzi przekształci Twoje dane wejściowe w:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Oops - używałem tej wartości!

Oto zmodyfikowana wersja, która zachowa wartości checkboxa i radia:

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

Czyszczenie formularzy jest trochę trudne i nie tak proste, jak się wydaje.

Zaproponuj użycie jQuery form plugin i skorzystaj z jego clearForm lub resetForm funkcjonalność. Zajmuje się większością narożników.

Dokument.getElementById ("frm").reset ()

JQuery Plugin

Stworzyłem wtyczkę jQuery, więc mogę z niej korzystać wszędzie, gdzie jej potrzebuję:

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

Więc teraz mogę go użyć dzwoniąc:

$('#my-form').clear();

Zwykle robię:

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

Lub

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

Rozważ użycie validation plugin - to świetnie! I resetowanie formularza jest proste:

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

Oto coś na początek

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Oczywiście, jeśli masz pola wyboru/przyciski opcji, musisz zmodyfikować to, aby również je uwzględnić i ustawić .attr({'checked': false});

Edit odpowiedź Paolo jest bardziej zwięzła. Moja odpowiedź jest bardziej słowna, ponieważ nie wiedziałem o selektorze :input, ani nie myślałem o prostym usunięciu atrybutu checked.

Uważam, że to działa dobrze.

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

W zasadzie żadne z dostarczonych rozwiązań mnie nie uszczęśliwia. jak zauważyło kilka osób, opróżniają formularz zamiast go zresetować.

Istnieje jednak kilka właściwości javascript, które pomagają:

• defaultValue dla pól tekstowych
• defaultChecked dla pól wyboru i przycisków opcji
• defaultSelected dla opcji wyboru

Przechowują one wartość, jaką miało pole podczas ładowania strony.

Pisanie jQuery plugin jest teraz trywialny: (dla niecierpliwych... oto demo http://jsfiddle.net/kritzikratzi/N8fEF/1/)

Plugin-code

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

Użycie

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

Kilka uwag ...

• nie przyjrzałem się nowym elementom formularza html5, niektóre mogą wymagać specjalnego traktowania, ale ten sam pomysł powinien zadziałać.
• elementy muszą być odwołane bezpośrednio. tzn. $( "#container" ).resetValue() nie zadziała. Zawsze używaj $( "#container :input" ) zamiast tego.
• Jak wspomniano powyżej, oto demo: http://jsfiddle.net/kritzikratzi/N8fEF/1 /

Może się okazać, że jest to łatwiejsze rozwiązanie bez jQuery.

W zwykłym JavaScript jest to tak proste jak:

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

Staram się zawsze pamiętać, że podczas gdy używamy jQuery, aby ulepszyć i przyspieszyć nasze kodowanie, czasami nie jest to w rzeczywistości szybsze. W takich przypadkach często lepiej jest użyć innej metody.

Zrobiłem małą odmianę ładnego rozwiązania Francisa Lewisa . To, czego nie robi jego rozwiązanie, to ustawienie listy rozwijanej selects na puste. (Myślę, że kiedy większość ludzi chce "wyczyścić", prawdopodobnie chcą, aby wszystkie wartości były puste.) Ten robi to z .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;
};

Zwykle dodaję do formularza Ukryty przycisk resetowania. w razie potrzeby po prostu: $('#reset').click ();

Modyfikacja najczęściej głosowanej odpowiedzi na $(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();
});

Po prostu użyj jQuery Trigger event w ten sposób:

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

Spowoduje to zresetowanie pól wyboru, przycisków radiowych, pól tekstowych itp... Zasadniczo zmienia formularz do stanu domyślnego. Po prostu umieść #ID, Class, element wewnątrz selektora jQuery.

U mnie to zadziałało, pyrotex odpowiedzi nie "resetował zaznaczone pola, wziął swoje, tutaj" moja edycja:

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

Używam rozwiązania Paolo Bergantino, które jest świetne, ale z kilkoma poprawkami... Specjalnie do pracy z nazwą formularza zamiast id.

Na przykład:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Teraz, gdy chcę go użyć a może zrobić

<span class="button" onclick="jqResetForm('formName')">Reset</span>

Jak widzisz, działa to z dowolnym formularzem, a ponieważ używam stylu css do tworzenia przycisku, strona nie będzie odświeżana po kliknięciu. Jeszcze raz dziękuję Paolo za Twój wkład. Jedynym problemem jest to, czy mam wartości domyślne w formularzu.

Użyłem poniższego rozwiązania i zadziałało mi (mieszanie tradycyjnego javascript z jQuery)

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

Jestem tylko średniozaawansowanym w PHP i trochę leniwym, aby zanurzyć się w nowym języku, takim jak JQuery, ale czy poniższe rozwiązanie nie jest prostym i eleganckim rozwiązaniem?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

Nie widzę powodu, dlaczego nie mieć dwóch przycisków submit, tylko z różnych celów. Wtedy po prostu:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

Po prostu redefiniujesz swoje wartości z powrotem do wartości domyślnych.

Metoda, której użyłem na dość dużym formularzu (50 + pól), polegała na przeładowaniu formularza za pomocą AJAX, w zasadzie wywołaniu z powrotem do serwera i zwróceniu pól z ich domyślnymi wartościami. Jest to znacznie łatwiejsze niż próba przechwycenia każdego pola za pomocą JS, a następnie ustawienie go na domyślną wartość. Pozwoliło mi to również zachować domyślne wartości w jednym miejscu-kod serwera. Na tej stronie były również różne ustawienia domyślne w zależności od ustawień konta i dlatego nie musiałem się martwić, że wyślę je do JS. Jedynym małym problemem, z którym miałem do czynienia, były pola sugerujące, które wymagały inicjalizacji po wywołaniu AJAX, ale nic wielkiego.

Wszystkie te odpowiedzi są dobre, ale absolutnym najłatwiejszym sposobem na zrobienie tego jest fałszywy reset, czyli użycie linku i przycisku resetowania.

Po prostu dodaj CSS, aby ukryć swój prawdziwy przycisk resetowania.

input[type=reset] { visibility:hidden; height:0; padding:0;}

A następnie na link dodajesz w następujący sposób

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

Tutaj z checkboxami refresh for i zaznacza:

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

Miałem ten sam problem i post Paolo mi pomógł, ale musiałem dostosować jedną rzecz. Mój formularz o id advancedindexsearch zawiera tylko pola wejściowe i pobiera wartości z sesji. Z jakiegoś powodu nie działa dla mnie:

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

Jeśli umieściłem alert po tym, widziałem wartości, gdzie usunięte poprawnie, ale potem, gdzie zastąpione ponownie. Nadal Nie wiem jak i dlaczego, ale poniższy wiersz zrobił dla mnie sztuczkę:

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

ODPOWIEDŹ Paolo nie uwzględnia wyboru daty, dodaj to w:

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

Poprawiłem trochę oryginalną odpowiedź Paolo Bergantino

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

W ten sposób mogę przekazać dowolny element kontekstu do funkcji. Jestem w stanie zresetować cały formularz lub tylko określony zestaw pól, na przykład:

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

Plus, wartości domyślne danych wejściowych są zachowywane.

Oto moje rozwiązanie, które działa również z nowymi typami wejściowymi 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);