Çok aşamalı formu jQuery ile sıfırlama

Bu şekilde kodlanmış standart sıfırlama düğmesi olan bir form var:

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

Sorun, söz konusu form çok aşamalı sıralamada olduğundan, bir kullanıcı bir sahneyi doldurur ve daha sonra geri dönerse, Sil düğmesi tıklandığında çeşitli alanlar için 'hatırlanan' değerler sıfırlanmaz.

Tüm alanlar üzerinde döngü ve onları 'el ile' temizlemek için bir jQuery işlevi eklemek hile yapacağını düşünüyorum. Zaten form içinde jQuery kullanıyorum, ama sadece hızlanıyor ve bu yüzden nasıl çok verimli görünmüyor, her alan kimliği ile bireysel olarak referans dışında, bu konuda nasıl emin değilim.

Herhangi bir yardım için TIA.

Mart 2012'de güncellendi.

Bu soruyu ilk olarak yanıtladıktan iki yıl sonra, bunun büyük bir karmaşaya dönüştüğünü görmek için geri geldim. En geri alınan ve kabul edilen olduğu için ona geri dönüp cevabımı gerçekten doğru yapmanın zamanı geldiğini hissediyorum.

Kayıt için, Titi'nin cevabı orijinal posterin istediği gibi yanlış - yerel reset () yöntemini kullanarak bir formu sıfırlamanın mümkün olduğu doğru, ancak bu soru hatırlanan bir formu temizlemeye çalışıyor bu şekilde sıfırlarsanız formda kalacak değerler. Bu yüzden "manuel" sıfırlamaya ihtiyaç vardır. Çoğu insanın bu soruya bir Google aramasından geldiğini ve reset () yöntemini gerçekten aradığını varsayıyorum, ancak OP'nin bahsettiği özel durum için çalışmıyor.

Benim asıl cevabım şuydu:

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

OP dahil olmak üzere birçok durumda işe yarayabilir, ancak yorumlarda ve diğer cevaplarda belirtildiği gibi, radyo / onay kutusu öğelerini herhangi bir değer özelliğinden temizler.

Daha doğru bir cevap (ama mükemmel değil):

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

Kullanılması :text, :radioonlar için değerlendirilmesi sonunda olarak kendileri tarafından, vb seçiciler jQuery tarafından kötü uygulama olarak kabul edilir *:textçok daha uzun olması gerekenden daha sürebilir yapar. Beyaz liste yaklaşımını tercih ediyorum ve bunu orijinal cevabımda kullansaydım. Her neyse, inputseçicinin bir kısmını ve form öğesinin önbelleğini belirterek , bu onu burada en iyi performans gösteren cevap haline getirmelidir.

İnsanların seçili öğeler için varsayılan değeri boş değere sahip bir seçenek değilse, bu sorunun yine de bazı kusurları olabilir, ancak kesinlikle alacağı kadar geneldir ve bunun duruma göre ele alınması gerekir. .

Gönderen http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

myinput.val('')böyle bir girişiniz varsa, ayar % 100 "sıfırla" ifadesini taklit etmeyebilir:

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

Örneğin myinput.val(''), varsayılan değeri 50 olan bir girdiyi çağırmak onu boş bir dizeye ayarlarken, çağrıyı myform.reset()başlangıç ​​değeri olan 50'ye sıfırlar.

Paolo'nun kabul ettiği cevapta büyük bir sorun var. Düşünmek:

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

.val('')Hattı da herhangi temizleyecektir value'ler onay kutuları ve radyo düğmeleri atanan. Yani (benim gibi) böyle bir şey yaparsanız:

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

Kabul edilen cevabı kullanmak girdilerinizi aşağıdaki gibi dönüştürecektir:

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

Hata! Bu değeri kullanıyordum!

Onay kutunuzu ve radyo değerlerinizi koruyacak değiştirilmiş bir sürüm:

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

İhtiyacım olan her yerde kolayca kullanabilmem için bir jQuery eklentisi oluşturdum:

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

Yani şimdi arayarak kullanabilirsiniz:

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

Formları temizlemek biraz zor ve göründüğü kadar basit değil.

Kullanmak Öner jQuery formu eklentisi ve kullanmak clearForm veya resetForm işlevselliği. Köşe kasalarının çoğunu halleder.

document.getElementById ( 'frm'). reset ()

Genellikle yaparım:

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

veya

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

İşte başlamanız için bir şey

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

Elbette, onay kutularınız / radyo düğmeleriniz varsa, bunları da dahil etmek ve ayarlamak için bunu değiştirmeniz gerekir. .attr({'checked': false});

düzenlemek Paolo's answer is more concise. Cevabım daha garip çünkü :inputseçiciyi bilmiyordum ya da sadece kontrol edilen özniteliği kaldırmayı düşünmedim.

Doğrulama eklentisini kullanmayı düşünün - harika! Ve formu sıfırlamak basittir:

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

Bunun işe yaradığını görüyorum.

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

temelde sağlanan çözümlerin hiçbiri beni mutlu etmiyor. birkaç kişinin işaret ettiği gibi, formu sıfırlamak yerine boşaltırlar.

ancak, yardımcı olan birkaç javascript özelliği vardır:

• Metin alanları için defaultValue
• onay kutuları ve radyo düğmeleri için kontrol edildi
• varsayılanSeçenek seçenekleri için seçili

bunlar sayfa yüklendiğinde bir alanın sahip olduğu değeri saklar.

jQuery eklentisi yazmak artık önemsiz: (sabırsız için ... işte bir demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

eklenti kodu

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

kullanım

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

bazı notlar ...

• Yeni html5 form öğelerine bakmadım, bazılarının özel tedaviye ihtiyacı olabilir, ancak aynı fikir işe yarayacaktır.
• elemanlara doğrudan referans verilmelidir. yani $( "#container" ).resetValue()çalışmaz. her zaman $( "#container :input" )bunun yerine kullanın.
• yukarıda belirtildiği gibi, bir demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Bunun jQuery olmadan daha kolay çözüldüğünü görebilirsiniz.

Normal JavaScript'te bu kadar basittir:

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

Kodlamayı geliştirmek ve hızlandırmak için jQuery kullanırken, bazen daha hızlı olmadığını her zaman hatırlamaya çalışıyorum. Bu durumlarda, başka bir yöntem kullanmak genellikle daha iyidir.

Francis Lewis'in güzel çözümünün küçük bir varyasyonunu yaptım . Çözümünün yapmadığı şey, açılır seçimleri boş olarak ayarlamaktır. (Çoğu kişi "net" istediğinizde, muhtemelen tüm değerler boş yapmak istiyorum düşünüyorum.) Bu seferki şekilde yazıyor .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;
};

Normalde forma gizli bir sıfırlama düğmesi eklerim. gerektiğinde: $ ('# reset'). tıklayın ();

$(document).ready()Durum için en çok oy verilen cevabın değiştirilmesi :

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

Sadece jQuery Trigger eventbenzeri kullanın :

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

Bu, onay kutularını, radyo düğmelerini, metin kutularını vb. Sıfırlar ... Esas olarak formunuzu varsayılan durumuna döndürür. Basitçe söylemek gerekirse #ID, Class, elementiçeride jQueryselektör.

bu benim için çalıştı, pyrotex cevap 'seçili alanları sıfırlamadı, aldı, burada' benim düzenlemem:

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

Harika ama birkaç tweaks ile Paolo Bergantino çözümü kullanıyorum ... Özellikle form adı ile bir id yerine çalışmak.

Örneğin:

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

Şimdi kullanmak istediğimde

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

Gördüğünüz gibi, bu herhangi bir formla çalışır ve düğmeyi oluşturmak için bir css stili kullandığım için, tıklandığında sayfa yenilenmez. Bir kez daha Paolo'ya teşekkür ederiz. Tek sorun formda varsayılan değerleri varsa.

Aşağıdaki çözümü kullandım ve benim için çalıştı (geleneksel javascript'i jQuery ile karıştırmak)

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

Ben sadece PHP'de bir ara ürünüm ve JQuery gibi yeni bir dile dalmak için biraz tembelim, ancak aşağıdaki basit ve zarif bir çözüm değil mi?

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

Sadece farklı amaçlarla iki gönderme düğmesinin olmamasının bir nedenini göremiyorum. Sonra basitçe:

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

Değerlerinizi varsayılanın olması gereken her şeye geri tanımlarsınız.

Oldukça büyük bir formda (50+ alan) kullandığım bir yöntem, formu AJAX ile yeniden yüklemek, temelde sunucuya geri çağrı yapmak ve alanları varsayılan değerleriyle döndürmekti. Bu, her alanı JS ile yakalamaya ve sonra varsayılan değerine ayarlamaya çalışmaktan çok daha kolaydır. Ayrıca varsayılan değerleri tek bir yerde tutmamı sağladı - sunucunun kodu. Bu sitede, hesabın ayarlarına bağlı olarak bazı farklı varsayılanlar da vardı ve bu nedenle bunları JS'ye gönderme konusunda endişelenmem gerekmedi. Başa çıkmak zorunda olduğum tek küçük sorun, AJAX çağrısından sonra başlatılması gereken bazı önemli alanlardı, ancak büyük bir anlaşma değildi.

Tüm bu cevaplar iyidir, ancak bunu yapmanın mutlak en kolay yolu sahte bir sıfırlamadır, yani bir bağlantı ve sıfırlama düğmesi kullanırsınız.

Gerçek sıfırlama düğmenizi gizlemek için biraz CSS ekleyin.

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

Ve sonra bağlantınıza aşağıdaki gibi eklersiniz

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Bu yardımcı olur umarım! 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>

Burada onay kutuları ve seçimlerin yenilenmesi ile:

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

Aynı sorunu yaşıyordum ve Paolo'nun görevi bana yardımcı oldu, ancak bir şeyi ayarlamam gerekiyordu. Advancedindexsearch kimliğine sahip formum yalnızca girdi alanlarını içeriyordu ve değerleri bir oturumdan alıyor. Nedense aşağıdakiler benim için çalışmadı:

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

Bundan sonra bir uyarı yaparsam, doğru şekilde kaldırılan değerleri gördüm, ancak daha sonra tekrar değiştirildikleri yerde gördüm. Hala nasıl veya neden bilmiyorum ama aşağıdaki satır benim için hile yaptı:

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

Paolo'nun yanıtı tarih seçicileri hesaba katmaz, bunu şuraya ekle:

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

Paolo Bergantino'nun orijinal cevabında küçük bir gelişme yaptım

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

Bu şekilde, herhangi bir bağlam öğesini işleve geçirebilirim. Formun tamamını veya yalnızca belirli bir alan kümesini sıfırlayabilirim, örneğin:

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

Ayrıca, girişlerin varsayılan değerleri korunur.

İşte yeni html5 giriş türleriyle de çalışan çözümüm:

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

Kabul edilen cevabı tamamlayan, SELECT2 eklentisini kullanıyorsanız, değişiklik yapmak için select2 betiğini hatırlamanız gerekir.

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