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

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

, reset () nie usuwa wartości domyślnych i pola wyboru, a problemów jest znacznie więcej.

Aby całkowicie zresetować, sprawdź poniższy link -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— Alpesh
źródło

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