Comment réinitialiser (effacer) le formulaire via JavaScript?

124

J'ai essayé $("#client.frm").reset();mais cela ne fonctionne pas Alors comment réinitialiser le formulaire via jQuery?

javascript jquery Akuzma
la source
Copie
6
Remarque: Effacer et Réinitialiser sont deux choses différentes. Réinitialiser (.reset() ) remettra les valeurs aux valeurs d'origine dans le HTML. Pour cela, voir la solution de Nick Craver ci-dessous. «Effacer» signifie généralement de remettre les valeurs à blanc / non coché / non sélectionné; voir la solution MahmoudS.
Luke

Réponses:

258

form.reset() est une méthode d'élément DOM (pas une sur l'objet jQuery), vous avez donc besoin de:

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

Ou sans jQuery:

document.getElementById("client").reset();
Nick Craver
la source
4
Mon cerveau vient de s'agrandir, merci: "Un objet jQuery est un wrapper de type tableau autour d'un ou plusieurs éléments DOM. Pour obtenir une référence aux éléments DOM réels (au lieu de l'objet jQuery), vous avez deux options. La première (et la méthode la plus rapide) consiste à utiliser la notation tableau: $ ("#foo") [0]; // Équivalent à document.getElementById ("foo") La deuxième méthode consiste à utiliser la fonction .get (): $ ("#foo ") .get (0); // Identique à ci-dessus, mais plus lentement." learn.jquery.com/using-jquery-core/faq/...
Andrew
J'obtiens l'erreur suivante: TypeError: document.getElementById (...). Reset n'est pas une fonction [En savoir plus]. J'utilise le plugin FormValidate pour la forme. son resetForm ne réinitialise pas trop le formulaire = (Des suggestions?
Eugen Konkov
Eugen, voici où, tout comme Indiana Jones et The Last Crusade, vous devez faire un acte de foi. Si vous appelez document.getElementById ('myform'). Reset (), cela effacera réellement le formulaire même si cette méthode semble ne pas exister. Obfuscation typique de M $.
Newclique
43

Vous pouvez simplement faire:

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

user2057484
la source
1
a Triggerm'amène dans un nouveau monde
gonatee
18

La solution Pure JS est la suivante:

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
la source
1
Voici la solution de plugin jQuery qui devrait être à peu près équivalente. stackoverflow.com/a/24496012/1766230 (J'ai utilisé votre selectedIndex = -1astuce.)
Luke
5
Cette solution ne fonctionne pas maintenant (en 2016). Lorsque le formulaire a des valeurs par défaut pour les entrées de texte, de mot de passe et de zone de texte, vous devez utiliser des éléments [i] .defaultValue = "" au lieu d'éléments [i] .value = "".
Andrew F.
var field_type = elements[i].type.toLowerCase();
Martynas Januškauskas
@Andrew: Cela dépend de ce que vous voulez. Si vous souhaitez simplement réinitialiser le formulaire sur le defaultValues, vous pouvez simplement appeler reset()l'objet formulaire. Le code ici est d' effacer le formulaire, plutôt que de le réinitialiser.
Protector one
4

Réinitialiser (effacer) le formulaire via Javascript& jQuery:

Exemple de Javascript:

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

Exemple jQuery:

Vous pouvez essayer d'utiliser le trigger() lien de référence

$('#client.frm').trigger("reset");
Gaurang P
la source
4

Remarque, la fonction form.reset()ne fonctionnera pas si certaines balises d'entrée dans le formulaire ont un attributname='reset'

Alexbobroff
la source
2

Essaye ça :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}
Hazem_M
la source
2

Effacez le formulaire comme suit

document.forms[0].reset();

Vous pouvez simplement effacer les éléments de formulaire dans le groupe. en utilisant ceci forms[0].

Nagaraju Vuppala
la source
1

Utilisez la fonction JavaScript reset():

document.forms["frm_id"].reset();
Félix Bagur
la source
1

Vous pouvez utiliser les éléments suivants:

$('[element]').trigger('reset')
Justlearning
la source
0

Essayez ce code. Une solution complète pour votre réponse.

    <!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
la source
-1

Vous pouvez effacer tout le formulaire en utilisant la fonction onclick. Voici le code pour cela

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

La fonction window.location.reload () rafraîchira votre page et toutes les données seront effacées.

Arjun
la source