Wyczyść pola formularza za pomocą jQuery

402

Chcę wyczyścić wszystkie pola wprowadzania i pola tekstowe w formularzu. Działa w następujący sposób, gdy używasz przycisku wprowadzania z resetklasą:

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

Spowoduje to wyczyszczenie wszystkich pól na stronie, nie tylko tych z formularza. Jak wyglądałby mój selektor dla samej formy, w jakiej znajduje się rzeczywisty przycisk resetowania?

tbuehlmann
źródło
Sprawdź odpowiedź autorstwa Paolo Bergantino stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
Wicked Coder
2
Bardziej szczegółowa metoda resetowania formularza tutaj .
Uzbekjon

Odpowiedzi:

487
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});
ShaneBlake
źródło
49
Nie zapomnij swoich input[type=password]pól.
SammyK
64
Ta odpowiedź obejmuje pierwotne pytanie. Ci, którzy chcą więcej niż tylko pól tekstowych, będą oczywiście musieli dodać kod w razie potrzeby ...
ShaneBlake
2
pamiętaj również, że w HTML5 będzie więcej typów danych niż typ = hasło (jak powiedział SammyK): typ = url, typ = cyfry, typ = e-mail itp. http://www.w3.org/TR/html5/forms .html # States-of-the-type-attribute
Gabriel
6
Mała wskazówka: ten selektor nie wybiera elementów wejściowych, które opierają się na niejawnym typie = tekst, musisz jawnie dołączyć typ = tekst na znaczniku. To może być oczywiste, ale to nie było dla mnie, teraz :-)
Elbin
2
@CaptSaltyJack: To resetuje je do wartości domyślnych, co nie jest tym samym, co ich czyszczenie ...
ShaneBlake
628

W przypadku jQuery 1.6+ :

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

Dla jQuery <1.6 :

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

Zobacz ten post: Resetowanie wieloetapowego formularza za pomocą jQuery

Lub

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

Jak sugeruje jQuery :

Pobieranie i zmiana właściwości DOM takie jak checked, selectedczy disabledstan elementów formy, należy .prop () sposobu.

ngen
źródło
3
Pierwszy fragment kodu ustawi wartości pól wyboru na „” zamiast po prostu je odznaczając. I nie wpłynie to na zaznaczenia, ponieważ są wybierane tagi opcji.
6
aby uniknąć usunięcia wartości opcji, to użyłem następujące, inspirowany odpowiedź: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');. Spowoduje to usunięcie wartości domyślnych (tzn. value="something"Nie dotyczy pól wyboru ani zaznaczeń.
Jeppe Mariager-Lam
17
NIE UŻYWAJ TEGO (opcja 1), jeśli masz radia, pola wyboru lub zaznaczenia, zmarnujesz dużo czasu na znalezienie dziwnego błędu po zniknięciu ich wartości. Prawidłowa wersja, która nie $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');
zmienia
8
Czy jest jakiś powód, aby unikać drugiej opcji?
rineez
6
twoje drugie rozwiązanie jest faktyczną odpowiedzią
abzarak,
159

Z jakichś powodów nie należy tego używać?

$("#form").trigger('reset');
użytkownik768680
źródło
17
@ pythonian29033: i przy twoim podejściu zresetujesz WSZYSTKIE formularze na stronie do wartości domyślnych ... co zdecydowanie NIE jest tym, czego chce normalny programista. Myślę, że programista jQuery powinien zwrócić uwagę na fakt, że musi zmienić selektor z przykładowego kodu na odpowiedni ...
Sk8erPeter,
8
@ Sk8erPeter Jeśli masz wiele elementów na stronie z identyfikatorem form, robisz to źle. Miałbyś rację, gdyby selektor był form, ale to raczej selektor ID #form.
brandones
@brandones: Powinieneś był zwrócić uwagę na to, na co odpowiadałeś, ponieważ się mylisz ... :) Sprawdź kod napisany przez pythonian29033 (na który odpowiedziałem wcześniej): $("form").trigger('reset');naprawdę wyzwala zdarzenie „reset” na WSZYSTKICH <form>elementach. W większości przypadków może być źle. Ale $("#form").trigger('reset');(pokazane w oryginalnej odpowiedzi) wyzwala tylko zdarzenie „reset” dla elementu, który ma ustawiony identyfikator „forma” (osiągalny za pomocą #formselektora). I tak, jeden identyfikator powinien być użyty tylko raz, dlatego nazywają go „id”, ponieważ identyfikuje on jeden element jednoznacznie.
Sk8erPeter
61

Nie będzie to obsługiwać 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();
parapura rajkumar
źródło
Mam tylko kod js z mojego pierwszego postu i chcę, aby działał na każdej stronie z kilkoma przyciskami resetowania w kilku formach. Tak więc tylko selektor wymaga pewnego wkładu.
tbuehlmann
51

jeśli użyjesz selektorów i dodasz wartości do pustych wartości, to nie resetuje formularza, powoduje, że wszystkie pola są puste. Resetowanie polega na utworzeniu formularza takim, jaki był przed wszelkimi czynnościami edycji dokonanymi przez użytkownika po załadowaniu formularza ze strony serwera. Jeśli istnieje dane wejściowe o nazwie „nazwa użytkownika”, a nazwa ta została wstępnie wypełniona po stronie serwera, większość rozwiązań na tej stronie usunie tę wartość z danych wejściowych, nie resetując jej do wartości sprzed zmiany użytkownika. Jeśli musisz zresetować formularz, użyj tego:

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

jeśli nie musisz resetować formularza, ale wypełniasz wszystkie dane wejściowe pewną wartością, na przykład pustą wartością, możesz użyć większości rozwiązań z innych komentarzy.

Lukas Liesis
źródło
29

Proste, ale działa jak urok.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS
jroi_web
źródło
14
Tyle że nie wyczyści pól. Ustawia je na domyślne.
Mark Fraser
28

Jeśli ktoś nadal czyta ten wątek, oto najprostsze rozwiązanie, które nie używa jQuery, ale zwykłego JavaScript. Jeśli 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

Twoje zdrowie!

Tarmo Saluste
źródło
Jak to mówi. Resetuje się do wartości wrodzonej postaci i nie opróżnia wartości. Ale tak, jeśli załadowałeś formularz z wartościami domyślnymi, nie zostaną one usunięte. Prawdopodobnie pętla JS, która przechodzi przez wszystkie wejścia i usuwa je
Tarmo Saluste
21
$('form[name="myform"]')[0].reset();
długopis
źródło
17

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

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

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


Próbowałem tego pierwszego, ale nie wyczyści pól z wartościami domyślnymi.

Oto sposób na zrobienie tego za pomocą jQuery:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});
Matt Ball
źródło
1
Próbowałem tego pierwszego, ale nie wyczyści pól z wartościami domyślnymi.
tbuehlmann
Jest jeszcze jeden powód, dla którego często potrzebujesz JavaScript. Formularz może wcale nie być „formularzem”. Na przykład Twój formularz jest tak naprawdę zbiorem danych wejściowych dla aplikacji Backbone.js / Ember.js / AngularJS, a dane nigdy nie będą przesyłane na serwer jako tradycyjny formularz, ale muszą być przetwarzane ściśle po stronie klienta JavaScript. W takich przypadkach nie ma formularza umożliwiającego resetowanie.
John Munsch,
3
.live()jest przestarzałe, a także powolne / niepotrzebne. Możesz po prostu użyć .bind()lub .on().
Kevin Beal
14

Jeśli chcesz opróżnić wszystkie pola wprowadzania, niezależnie od ich typu, jest to minuta

 $('#MyFormId')[0].reset();
Rashi Goyal
źródło
12

Mam najłatwiejszy sposób na zresetowanie formularza

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

lub

$("#review-form").get().reset();
Mumair
źródło
12

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

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

Pamiętaj, żeby 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”);

Próbowałem i to działa.

Uwaga: Należy zauważyć, że metody te resetują formularz tylko do wartości początkowej ustawionej przez serwer podczas ładowania strony. Oznacza to, że jeśli dane wejściowe zostały ustawione na wartość „ustaw wartość” przed dokonaniem przypadkowej zmiany, pole zostanie zresetowane do tej samej wartości po wywołaniu metody resetowania.

Mam nadzieję, że to pomoże

BoCyrill
źródło
7
$('#editPOIForm').each(function(){ 
    this.reset();
});

gdzie editPOIFormjest idatrybut twojego formularza.

Służyć wiedzy
źródło
2
Będzie tylko jeden, #editPOIFormwięc .each()metoda nie ma sensu. Nawet jeśli dodasz ten identyfikator do wielu formularzy, zwróci tylko jeden z nich.
Kevin Beal
1
Funkcja each () pozwala użyć tego (zamiast $ (this)), aby dostać się do bazowego obiektu DOM i wywołać reset (). Zakładając, że chcesz zresetować do wartości domyślnych, zamiast wyczyścić wszystko, jest to dobre rozwiązanie.
Dave
@Dave Might również może po prostu użyć$('#editPOIForm').get(0).reset();
Thomas Daugaard
2
@ThomasDaugaard: z wyjątkiem tego, że jeśli użyjesz get (0) lub po prostu $ ('# editPOIForm') [0] dostaniesz błąd skryptu, jeśli $ ('# editPOIForm') nie pasuje do żadnych elementów, podczas gdy każdy () zakończy się niepowodzeniem bez błąd. Podejrzewam, że zależy to od twoich priorytetów w zakresie obsługi błędów.
Dave
6

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

Carlos Alvarez
źródło
6

Testowany i zweryfikowany kod:

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

Javascript musi być włączony $(document).readyi musi być zgodny z twoją logiką.

DeepCode
źródło
5

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

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

Mamun Sabuj
źródło
Tylko małe ostrzeżenie: Jeśli masz wartości domyślne dla danych wejściowych, powiedzmy renderowane przez serwer, to form.reset();zresetuje się do tych wartości i nie wyczyści danych wejściowych.
Evil_Bengt,
4

Powiedzmy, że jeśli chcesz wyczyścić pola i oprócz accountType, w polu średniego czasu zostanie przywrócona konkretna wartość, tj. „Wszystkie”. Pozostałe pola powinny zostać zresetowane do pustych, tj. Pole tekstowe. Takie podejście zostanie zastosowane do wyczyszczenia konkretne pola jako nasze wymaganie.

 $(':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';
     }
 });
Gnanasekaran Ebinezar
źródło
Najbardziej kompletna odpowiedź. Dzięki.
RationalRabbit
Jedno pytanie: Jak skierowałbyś to do konkretnego formularza, gdybyś robił to programowo, a nie za pomocą kliknięcia przycisku?
RationalRabbit
4

Używam tego :

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

A oto mój przycisk:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>
Matheno
źródło
Dostępny jest typ wejścia resetowania w3.org/TR/html-markup/input.reset.html
Thomas Welton
3

Użyj tego kodu, w którym chcesz wywołać funkcję normalnego resetowania przez jQuery

setTimeout("reset_form()",2000);

I napisz tę funkcję Out Site jQuery na Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>
Monzur
źródło
3

Niektórzy z was narzekali, że radiotelefony są usuwane z domyślnego statusu „zaznaczone” ... Wystarczy dodać: radio,: selektory pola wyboru do .not, a problem został rozwiązany.

Jeśli nie możesz uruchomić wszystkich innych funkcji resetowania, zadziała ta.

  • Na podstawie odpowiedzi Ngen

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }
Gregory Bowers
źródło
2
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 
  1. frmID jest identyfikacja formularza
  2. OnSuccessoperacji nazywamy 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 wykonasz oba te prawa, nie będziesz w stanie zatrzymać działania ...

LWC Nirosh
źródło
1

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

$("body").find('form').find('input,  textarea').val('');
shivaP
źródło
0

Jeśli chcę wyczyścić wszystkie pola oprócz accountType..Użyj następujących

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');
Gnansekaran Ebinezar
źródło
1
nie chcesz stracić wartości
pól
0

kod, który widzę tutaj i dotyczące powiązanych pytań SO, wydaje się niekompletny.

Zresetowanie formularza oznacza ustawienie oryginalnych wartości z kodu HTML, dlatego zestawiłem to dla małego projektu, który wykonywałem na podstawie powyższego kodu:

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

Daj mi znać, jeśli coś mi brakuje lub coś można poprawić.

Rafael Kitover
źródło
0

Żadne z powyższych nie działa w prostym przypadku, gdy strona zawiera wywołanie kontroli użytkownika, które obejmuje przetwarzanie żądań IHttpHandler (captcha). Po wysłaniu żądania (do przetwarzania obrazu) poniższy kod nie usuwa 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>
użytkownik2366666
źródło
0

Napisałem uniwersalną wtyczkę 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>

Jekis
źródło
-2

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();
}
Jayan.CA
źródło
-4

$ („formularz”). submission (function () {

var el = $(this);

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

return false;

});

Júnior Mendonça
źródło