Form alanlarını jQuery ile temizle

Bir formdaki tüm girdi ve metin alanlarını temizlemek istiyorum. Sınıfla birlikte bir giriş düğmesi kullanılırken aşağıdaki gibi çalışır reset:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Bu, yalnızca formdaki alanları değil sayfadaki tüm alanları temizler. Seçicim, gerçek sıfırlama düğmesinin yaşadığı biçim için nasıl görünür?

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

JQuery 1.6+ için :

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

JQuery <1.6 için :

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

Lütfen bu gönderiye bakın: jQuery ile çok aşamalı bir formu sıfırlama

Veya

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

JQuery'nin önerdiği gibi :

Almak ve bu şekilde değiştirmek DOM özelliklerini için checked, selectedya da disabledkullanımı, form elemanları durumuna .prop () metodu.

Bunun kullanılmaması için herhangi bir neden var mı?

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

Bu, form giriş alanlarının boş olmayan varsayılan değerlere sahip olduğu durumları işlemez.

Gibi bir şey çalışmalı

$('yourdiv').find('form')[0].reset();

seçiciler kullanır ve değerleri boş değerlere dönüştürürseniz formu sıfırlamaz, tüm alanları boş bırakır. Sıfırlama, formun sunucu tarafından yüklendikten sonra formu kullanıcının yaptığı düzenleme işlemlerinden önceki gibi yapmaktır. "Kullanıcıadı" adında bir giriş varsa ve bu kullanıcı adı sunucu tarafından önceden doldurulmuşsa, bu sayfadaki çözümlerin çoğu bu değeri girişten siler, kullanıcının değişikliklerinden önceki değerine sıfırlamaz. Formu sıfırlamanız gerekirse, bunu kullanın:

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

formu sıfırlamanız gerekmiyorsa, ancak tüm girdileri boş değer gibi bir değerle doldurmanız gerekiyorsa, diğer yorumların çoğunu kullanabilirsiniz.

Basit ama bir cazibe gibi çalışır.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

Birisi hala bu konuyu okuyorsa, burada jQuery değil, düz JavaScript kullanan en basit çözüm. Giriş alanlarınız bir formun içindeyse, basit bir JavaScript sıfırlama komutu vardır:

document.getElementById("myform").reset();

Burada daha fazla bilgi bulabilirsiniz: http://www.w3schools.com/jsref/met_form_reset.asp

Şerefe!

$('form[name="myform"]')[0].reset();

Neden herhangi bir JavaScript ile yapılması gerekiyor?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

Birincisi, varsayılan değerlere sahip alanları temizlemeyeceğini denedi.

İşte bunu jQuery ile yapmanın bir yolu, o zaman:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

Türüne bakılmaksızın tüm giriş kutularını boşaltmak istiyorsanız, adım adım

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

Formu sıfırlamak için en kolay hile var

jQuery("#review-form")[0].reset();

veya

$("#review-form").get().reset();

Javascript ile basitçe bu sözdizimi ile yapabilirsiniz getElementById("your-form-id").reset();

sıfırlama işlevini bu şekilde çağırarak jquery'yi de kullanabilirsiniz $('#your-form-id')[0].reset();

Unutmamayı unutma [0]. Aşağıdaki hatayı alırsanız

TypeError: $ (...). Reset bir işlev değil

JQuery ayrıca kullanabileceğiniz bir etkinlik sağlar

$ ( '# Form_id') tetiği ( "sıfırlama.");

Denedim ve işe yarıyor.

Not: Bu yöntemlerin, formunuzu yalnızca sayfa yükleme sırasında sunucu tarafından ayarlanan başlangıç ​​değerlerine sıfırladığını fark etmek önemlidir. Bu, girişiniz rastgele bir değişiklik yapmadan önce 'ayar değeri' olarak ayarlanmışsa, sıfırlama yöntemi çağrıldıktan sonra alanın aynı değere sıfırlanacağı anlamına gelir.

Umarım yardımcı olur

$('#editPOIForm').each(function(){ 
    this.reset();
});

nerede editPOIFormolduğunu idformunuzun özniteliği.

Neden kullanmıyorsun document.getElementById("myId").reset();? bu basit ve güzel

Test edilmiş ve doğrulanmış kod:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript dahil $(document).readyedilmeli ve mantığınızla birlikte olmalıdır.

En kolay ve en iyi çözüm
$("#form")[0].reset();

Burada kullanma -
$(this)[0].reset();

Diyelim ki alanları temizlemek istiyorsanız ve accountType hariç, ortalama zaman açılır kutusunda belirli bir değere, yani 'Tümü'ne sıfırlanacaktır. bizim ihtiyaç olarak belirli alanlar.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Bunu kullanıyorum :

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

Ve işte benim düğmem:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

JQuery tarafından Normal Sıfırlama İşlevini Aramak İstediğiniz Bu Kodu Kullanın

setTimeout("reset_form()",2000);

Ve Bu Fonksiyonu Site Dışına Yaz jQuery Belgeye Hazır

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

Bazılarınız radyoların ve benzerlerinin varsayılan "işaretli" durumundan temizlendiğinden şikayet ediyordunuz ... Tek yapmanız gereken .not'a radyo,: onay kutusu seçicilerini eklemek ve sorun çözüldü.

Diğer tüm sıfırlama işlevlerini çalıştıramazsanız, bu işlev çalışır.

• Ngen'in cevabından uyarlandı

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID formun tanımlanması

2. OnSuccessJavaScript işlevini " ClearInput" adıyla adlandırdığımız işlemin

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. her ikisini de doğru yaparsanız, çalışmasını durduramazsınız ...

Aşağıdaki kod tüm formu temizler ve alanları boş olur. Sayfada birden fazla form varsa yalnızca belirli bir formu temizlemek istiyorsanız, lütfen formun kimliğini veya sınıfını belirtin

$("body").find('form').find('input,  textarea').val('');

İ accountType hariç tüm alanları temizlemek istiyorsanız .. Aşağıdakileri kullanın

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

Burada ve ilgili SO sorular üzerinde gördüğüm kod eksik görünüyor.

Bir formun sıfırlanması, HTML'den orijinal değerlerin ayarlanması anlamına gelir, bu yüzden yukarıdaki koda dayalı olarak yaptığım küçük bir proje için bunu bir araya getirdim:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Bir şey eksik olup olmadığımı veya iyileştirilebileceğimi lütfen bize bildirin.

Sayfanın hiçbiri, sayfa IHttpHandler istek işleme (captcha) içeren bir web kullanıcısı denetimi çağrısı içerdiğinde basit bir durumda çalışmaz. Talep gönderildikten sonra (görüntü işleme için) aşağıdaki kod formdaki alanları (HttpHandler isteğini göndermeden önce) temizlemez.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

Evrensel bir jQuery eklentisi yazdım:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

Gizli sıfırlama düğmesini aşağıdaki gibi ekleyin

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$ ('form'). Submit (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});