Jak zresetować (wyczyścić) formularz za pomocą JavaScript?

124

Próbowałem, $("#client.frm").reset();ale nie działa, więc jak zresetować formularz przez jQuery?

javascript jquery akuzma
źródło
Możliwy duplikat stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
svk
6
Uwaga: kasowanie i resetowanie to dwie różne rzeczy. Reset ( .reset()) przywróci wartościom oryginalne wartości w kodzie HTML. W tym celu zobacz rozwiązanie Nicka Cravera poniżej. „Wyczyść” zazwyczaj oznacza przywrócenie wartości pustych / niezaznaczonych / niezaznaczonych; zobacz rozwiązanie MahmoudS.
Łukasz

Odpowiedzi:

258

form.reset() jest metodą elementu DOM (nie taką w obiekcie jQuery), więc potrzebujesz:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

Lub bez jQuery:

document.getElementById("client").reset();
Nick Craver
źródło
4
Mój mózg właśnie się rozwinął, dziękuję: „Obiekt jQuery jest tablicą opakowującą jeden lub więcej elementów DOM. Aby uzyskać odniesienie do rzeczywistych elementów DOM (zamiast obiektu jQuery), masz dwie opcje. Pierwsza (i najszybszą) jest użycie notacji tablicowej: $ ("#foo") [0]; // Odpowiednik document.getElementById ("foo") Drugą metodą jest użycie funkcji .get (): $ ("#foo ") .get (0); // Identycznie jak powyżej, tylko wolniej." learn.jquery.com/using-jquery-core/faq/…
Andrew
Pojawia się następny błąd: TypeError: document.getElementById (...). Reset nie jest funkcją [Dowiedz się więcej]. Używam wtyczki FormValidate do formularza. jego resetForm również nie resetuje formularza = (Jakieś sugestie?
Eugen Konkov
Eugen, oto gdzie, podobnie jak Indiana Jones i The Last Crusade, musisz zrobić skok wiary. Jeśli wywołasz document.getElementById ('myform'). Reset (), to faktycznie wyczyści formularz, nawet jeśli ta metoda wydaje się nie istnieć. Typowe zaciemnianie M $.
Newclique
43

Możesz po prostu zrobić:

$("#client.frm").trigger('reset')

user2057484
źródło
1
a Triggerprzenosi mnie do nowego świata
gonatee
18

Czyste rozwiązanie JS jest następujące:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}
Mahmoud Saleh
źródło
1
Oto rozwiązanie wtyczki jQuery, które powinno być z grubsza równoważne. stackoverflow.com/a/24496012/1766230 (użyłem twojej selectedIndex = -1sztuczki)
Luke
5
To rozwiązanie nie działa teraz (w 2016 r.). Gdy formularz ma domyślne wartości dla tekstu, hasła i pola tekstowego, powinieneś użyć elementów [i] .defaultValue = "" zamiast elementów [i] .value = "".
Andrew F.,
var field_type = elements[i].type.toLowerCase();
Martynas Januškauskas
@ Andrew: To zależy od tego, czego chcesz. Jeśli chcesz tylko zresetować formularz do defaultValues, możesz po prostu wywołać reset()obiekt formularza. Kod tutaj służy do czyszczenia formularza, a nie resetowania go.
Protector One
4

Zresetuj (wyczyść) formularz przez Javascript& jQuery:

Przykład JavaScript:

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

Przykład jQuery:

Możesz spróbować użyć trigger() odnośnika referencyjnego

$('#client.frm').trigger("reset");
Gaurang P.
źródło
4

Uwaga, funkcja form.reset()nie będzie działać, jeśli jakiś znacznik wejściowy w formularzu ma atrybutname='reset'

alexbobroff
źródło
2

Spróbuj tego :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}
Hazem_M
źródło
2

Wyczyść formularz w następujący sposób

document.forms[0].reset();

Możesz po prostu wyczyścić elementy formularza w grupie. używając tego forms[0].

Nagaraju Vuppala
źródło
1

Użyj funkcji JavaScript reset():

document.forms["frm_id"].reset();
Felix Bagur
źródło
1

Możesz użyć następujących:

$('[element]').trigger('reset')
Tylko nauka
źródło
0

Wypróbuj ten kod. Kompletne rozwiązanie dla Twojej odpowiedzi.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>
Jaffer Wilson
źródło
-1

Możesz wyczyścić cały formularz za pomocą funkcji onclick, oto kod do niego.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

Funkcja window.location.reload () odświeży twoją stronę i wszystkie dane zostaną wyczyszczone.

Arjun
źródło