Jak zresetować elementy formularzy (dane wejściowe, zaznaczenia, obszary tekstowe itp.) W przypadku zdarzeń za pomocą jQuery

Question

Potrzebuję zresetować elementy formularzy po rozpiętości kliknięć na przykład.

Czy istnieje metoda resetowania przez jQuery bez wybierania każdego elementu i usuwania wartości atrybutu.

Niektóre z elementów nie mających wartość atrybutu jak tekstowego lub radia

a niektóre jak przycisku Nie chcę, aby usunąć z niego wartość.

chcę użyć jQuery użyć resetu na innych imprezach

kod np http://jsfiddle.net/pgNrF/

<input type="button" value="Input Button"> 
<input type="checkbox"> 
<input type="hidden"> 
<textarea></textarea> 
<span>Reset</span> 

Answer 1

ta jest już wbudowana w jeśli owinąć te elementy formularza w rzeczywistej postaci:

<form id="myform"> 
    <input type="button" value="Input Button"> 
    <input type="checkbox"> 
    <input type="file"> 
    <input type="hidden"> 
    <input type="image"> 
    <input type="password"> 
    <input type="radio"> 
    <input type="submit"> 
    <input type="text"> 
    <select> 
     <option>Option1</option> 
     <option>Option2</option> 
     <option>Option3</option> 
    </select> 

    <textarea></textarea> 
    <button type="button">Button</button> 

    <button type="reset">Reset</span> 
</form> 

FIDDLE

Jeśli musisz tylko użyć jQuery:

$('span').click(function() { 
    $('#myform').get(0).reset(); 
}); 

FIDDLE

Answer 2

Zmień

<span>Reset</span> 

do

<input type='reset' value='Reset'> 

Zostało wprowadzone w celu zresetowania wszystkich wartości formularza do wartości domyślnych.

Jeśli trzeba także rozwiązać niektóre wydarzenia można to zrobić za pomocą jQuery:

$("input:reset").click(function() { 
    // unbind and reset what is left 
}); 

Answer 3

jeśli nie używając <form>, a następnie za pomocą jQuery -

$('span').click(function() { 
    $("input").val("") 
    $("select option").removeAttr("selected"); 
    $("textarea").val(""); 
}); 

Answer 4

Jeśli nie używasz przycisku resetowania użyj tego kodu jQuery

$('span').click(function() { 
    $('input').val(''); 
    $("textarea").val(''); 

}); 

Answer 5

Późno komentarz o zresetowanie textareas.

Korzystanie z wersji Chrome Wersja 54.0.2840.99 m na komputerze z systemem Windows 10 Home Wersja, znalazłem natywną/wbudowaną funkcję resetowania, która jest wywoływana przez zwykły/niezmodyfikowany przycisk resetowania lub instrukcję form.reset() przywraca początkową wartość pola textarea, ale tylko wtedy, gdy obszar tekstowy nie został wcześniej programowo wyczyszczony, powiedzmy za pomocą niestandardowego przycisku clear, który opróżnia innerHTML textarea.

Nie można tego zaobserwować, gdy obszar tekstowy zostanie załadowany po raz pierwszy bez wartości domyślnej, ale jeśli obszar tekstowy jest zakodowany w celu wyświetlenia danych z poprzedniego wpisu formularza, to obszar tekstowy może nie być pusty, a resetowanie obszaru tekstowego powinno ustaw pole na wartość, która miała przy ładowaniu formularza.

Stwierdziłem, że domyślny atrybut textarea's defaultValue, którego używa natywny reset, jest niepoprawnie wyczyszczony po opróżnieniu innerHTML z pola tekstowego, a następnie zresetowanie powoduje jedynie wyczyszczenie obszaru tekstowego zamiast resetowania tekstu zgodnie z oczekiwaniami. Uważam, że jest to błąd, ponieważ w porównaniu do czyszczenia i resetowania innych pól wprowadzania tekstu, textarea działa inaczej.

To zachowanie "dziwnego człowieka" można obejść, dodając niestandardowy atrybut initialValue do obszaru tekstowego i przypisując do niego wartość innerHTML. Ponieważ funkcja natywnego resetowania i niestandardowego czyszczenia nie ma wpływu na atrybut niestandardowy, wartość jest zachowywana i może zostać użyta do przywrócenia wartości textarea przez zastąpienie przycisku resetowania w celu wywołania funkcji ustawiającej innerHTML textarea na wartość atrybutu initialValue następnie wywołuje funkcję form.reset(), aby obsłużyć inne pola wejściowe. Zauważ, że wywołanie funkcji form.reset() powoduje, że funkcja resetowania niestandardowego wywoływana przez zmodyfikowany przycisk reset nie wykonuje żadnego kodu po form.reset().