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
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

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
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
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
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

, la méthode reset () n'efface pas les valeurs par défaut et le champ de case à cocher et il y a beaucoup plus de problèmes.

Afin de réinitialiser complètement, vérifiez le lien ci-dessous -

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

— Alpesh
source

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
source

4

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

— Alexbobroff
source

2

Essaye ça :

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

— Hazem_M
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
source

1

Utilisez la fonction JavaScript reset():

document.forms["frm_id"].reset();

— Félix Bagur
source

1

Vous pouvez utiliser les éléments suivants:

$('[element]').trigger('reset')

— Justlearning
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
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
source