Wyczyść pola formularza za pomocą jQuery

Dla jQuery 1.6+:

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

Dla jQuery :

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

Zobacz ten post: Resetowanie formularza wielostopniowego za pomocą jQuery

Lub

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

Jak sugeruje jQuery :

Aby pobrać i zmienić właściwości DOM, takie jak checked, selected, lub disabled Stan elementów formularza, użyj .metoda prop().

Jakiś powód, dla którego nie powinno się tego używać?

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

To nie obsłuży przypadków, w których pola wejściowe formularza mają niepuste wartości domyślne.

Coś jak powinno działać

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

Jeśli używasz selektorów i zmieniasz wartości na puste, nie resetuje to formularza, tylko powoduje, że wszystkie pola są puste. Reset polega na tym, aby formularz był taki, jaki był przed jakąkolwiek edycją od użytkownika po załadowaniu formularza od strony serwera. Jeśli istnieje wejście o nazwie "username" i nazwa użytkownika została wstępnie wypełniona po stronie serwera, większość rozwiązań na tej stronie usunie tę wartość z wejścia, a nie zresetuje ją do wartości, jaka była przed zmianami użytkownika. Jeśli chcesz zresetować formularz, użyj to:

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

Jeżeli nie trzeba resetować formularza, ale wypełnić wszystkie dane wejściowe jakąś wartością, na przykład pustą, to można skorzystać z większości rozwiązań z innych komentarzy.

Proste, ale działa jak urok.

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

Jeśli ktoś nadal czyta ten wątek, oto najprostsze rozwiązanie używając nie jQuery, ale zwykłego JavaScript. Jeśli Twoje pola wejściowe znajdują się w formularzu, istnieje proste polecenie resetowania JavaScript:

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

Więcej o tym tutaj: http://www.w3schools.com/jsref/met_form_reset.asp

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

Dlaczego w ogóle trzeba to robić za pomocą JavaScript?

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

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

Najpierw spróbowałem tego, nie wyczyści pól z wartościami domyślnymi.

Oto Jak to zrobić z jQuery:

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

Mam najprostszą sztuczkę do zresetowania formularza

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

Lub

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

Jeśli chcesz opróżnić wszystkie pola wejściowe bez względu na ich typ, jest to minutowy Krok

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

Z Javascript można po prostu zrobić to za pomocą tej składni getElementById("your-form-id").reset();

Możesz również użyć jquery, wywołując funkcję reset w ten sposób $('#your-form-id')[0].reset();

Pamiętaj, aby nie zapomnieć [0]. Otrzymasz następujący błąd, jeśli

TypeError: $(...).reset nie jest funkcją

JQuery zapewnia również zdarzenie, którego możesz użyć

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

Uwaga: ważne jest, aby zauważyć, że te metody tylko zresetuj formularz do wartości początkowej ustawionej przez serwer podczas ładowania strony. Oznacza to, że jeśli Dane wejściowe zostały ustawione na wartości 'set value' przed dokonaniem losowej zmiany, pole zostanie zresetowane do tej samej wartości po wywołaniu metody reset.

Hope it helps

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

Gdzie editPOIForm jest atrybutem id formularza.

Dlaczego nie używasz document.getElementById("myId").reset();? to jest proste i ładne

Przetestowany i zweryfikowany kod:

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

Javascript musi być zawarty w $(document).ready I musi być zgodny z Twoją logiką.

Używam tego:

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

A oto mój guzik:

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

Powiedzmy, że jeśli chcesz wyczyścić pola i z wyjątkiem accountType, w rozwijanym polu mean time zostanie zresetowana do określonej wartości, tj. 'All'.Pozostałe pola należy zresetować do pustego pola tekstowego.Takie podejście będzie stosowane do czyszczenia poszczególnych pól jako naszego wymogu.

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

Najprostszym i najlepszym rozwiązaniem jest-
$("#form")[0].reset();

Nie używaj tutaj -
$(this)[0].reset();

Użyj tego kodu, gdy chcesz wywołać normalną funkcję Reset przez jQuery

setTimeout("reset_form()",2000);

I zapisz tę funkcję jQuery na gotowym dokumencie

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

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

1. frmID jest identyfikacją postaci

2. OnSuccess operacji wywołujemy funkcję JavaScript o nazwie "ClearInput"

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

3. Jeśli zrobisz to dobrze, nie będziesz w stanie go powstrzymać...

Jeśli chcę wyczyścić wszystkie pola z wyjątkiem accountType..Użyj następującego

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

Kod, który widzę tutaj i na pokrewnych więc pytania wydaje się niekompletny.

Resetowanie formularza oznacza ustawienie oryginalnych wartości z HTML, więc złożyłem to razem dla małego projektu, który robiłem w oparciu o powyższy kod:

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

Proszę dać mi znać, jeśli czegoś brakuje lub coś można poprawić.

Żaden z powyższych przypadków nie działa w prostym przypadku, gdy strona zawiera wywołanie do kontroli użytkownika sieci Web, które wymaga IHttpHandler request processing (captcha). Po wysłaniu requsrt (do przetwarzania obrazu) poniższy kod nie wyczyszcza pól w formularzu (przed wysłaniem żądania HttpHandler ) wszystko działa poprawnie.

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

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

Napisałem uniwersalny plugin jQuery:

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

Poniższy kod wyczyści cały formularz i jego pola będą puste. Jeśli chcesz wyczyścić tylko konkretny formularz, jeśli strona ma więcej niż jeden formularz, podaj identyfikator lub klasę formularza

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

Dodaj Ukryty przycisk resetowania w następujący sposób

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

$('forma').submit (function () {

var el = $(this);

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

return false;

});