Comment faire pour réinitialiser un formulaire à l'aide de jQuery avec .méthode reset()
J'ai eu code de travail qui pourrait réinitialiser mon formulaire quand je clique sur un bouton de réinitialisation. Cependant, au bout de mon code est de plus en plus longues, je me rends compte qu'il ne fonctionne plus.
<div id="labels">
<table class="config">
<thead>
<tr>
<th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
</tr>
<tr>
<th>Index</th>
<th>Switch</th>
<th>Response Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<form id="configform" name= "input" action="#" method="get">
<tr><td style="text-align: center">1</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
<td><input style="background: white; color: black;" type="text" id="label_one"></td>
</tr>
<tr>
<td style="text-align: center">2</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
<td><input style="background: white; color: black;" type="text" id = "label_two"></td>
</tr>
<tr>
<td style="text-align: center">3</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td style="text-align: center">4</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="configsubmit" value="Submit"></td>
</tr>
<tr>
<td><input type="reset" id="configreset" value="Reset"></td>
</tr>
</form>
</tbody>
</table>
</div>
Et mon jQuery:
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Est-il une source que je devrais inclure dans mes codes pour que le .reset()
méthode de travail? Auparavant, j'ai été en utilisant:
<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>
et la .reset()
méthode de travail.
Actuellement, je suis en utilisant
<script src="static/jquery-1.9.1.min.js"></script>
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>
Pourrait-il éventuellement être l'une des raisons?
- pouvez-vous donner un exemple de ne pas travailler? est l'un des champs d'obtenir réinitialisé?
- c'est quelque chose comme ça, mais il fonctionne très bien ici jsfiddle.net/chJ8B 🙁 probablement parce que d'autres parties du script? mais j'ai seulement 1 formulaire
- ma question est de savoir si aucun champ est réinitialisé / certains sont travail
- de Votre code HTML n'est pas valide. Un formulaire ne peut pas être un enfant d'un élément TBODY, et un TR ne peut pas être un enfant d'un élément de FORMULAIRE. Mettre les balises de formulaire à l'extérieur de la table (c'est à dire mettre le tableau dans le formulaire). Très probablement la forme est déplacé en dehors de la table, mais les contrôles de formulaire sont rester dans les cellules de sorte qu'ils ne sont plus dans la forme.
- bon point! je vais essayer ça. merci!!!! j'ai peut-être manqué cette observation utile si je n'ai pas de revenir ici pour obtenir mon violon lien :s
Vous devez vous connecter pour publier un commentaire.
vous pouvez essayer d'utiliser trigger() Lien De Référence
http://jsfiddle.net/8zLLn/
Mettre en JS fiddle. Il fonctionne comme prévu.
Donc, aucune de ces questions sont en faute. Vous avez peut-être un conflit d'ID de problème? Est cliquez sur exécuter réellement?
Edit: (parce que je suis triste de sac sans commenter capacité), Il n'est pas un problème directement avec votre code. Cela fonctionne bien lorsque vous sortez du contexte de la page que vous êtes en train d'utiliser, de sorte que, au lieu d'être quelque chose avec le particulier jQuery/javascript & attribué données de formulaire, il doit être quelque chose d'autre. J'aimerais commencer coupant le code autour d'elle et essayer de trouver où elle se passe. Je veux dire, juste à "assurez-vous", je suppose que vous pourriez...
dans la fonction de clic et assurez-vous que c'est le ciblage de la bonne forme...
et si elle l'est, ça doit être quelque chose qui n'est pas listée ici.
modifier la partie 2: Une chose que vous pourriez essayer (si ce n'est pas de cibler correctement) est l'utilisation "d'entrée:reset" au lieu de ce que vous utilisez... aussi, je vous suggère parce que ce n'est pas la cible incorrecte de travail pour savoir ce que le réel sur cible. Il suffit d'ouvrir firebug/outils de développement, whathave vous, mélanger dans
et voir ce qui apparaît. et puis on peut aller à partir de là.
$('#ptest').html("clicked reset")
dans le click(function(){}); où il devrait afficher "cliqué reset" mais il na pas montrer{}
[0]
faire?[0]
sélectionne le premier élément. Mais en jQuery, il sélectionne le html de l'élément. Donc,[0]
est de vous donner le code html, ce qui vous permet d'appeler le code html, pas de jQuery, méthode appeléereset
. Voir @kevin 's réponse ci-dessous pour plus d'informations.[0]
sur c'est de vous donner le code HTML de l'élément dom au lieu de l'objet jQuery. De la même manière que vous le feriezdocument.getElementById()
, le[0]
juste attrape l'élément sous-jacent de la même manière que vous le feriez avec raw javascript.Selon ce post ici, jQuery n'a pas de
reset()
méthode; mais natif JavaScript n'. Donc, convertir le jQuery élément d'un objet JavaScript en utilisant soit :C'est une de ces choses qui est en fait plus facile de vanille dans le Javascript de jQuery. jQuery n'est pas un
reset
méthode, mais l'Élément de Formulaire HTML, de sorte que vous pouvez réinitialiser tous les champs dans un formulaire comme ceci:Si vous le faites via jQuery (comme on le voit dans d'autres réponses ici:
$('#configform')[0].reset()
), le[0]
est l'extraction de la même forme de l'élément DOM que vous obtenez directement viadocument.getElementById
. La dernière approche est à la fois plus efficace et plus simple que même si (depuis avec jQuery approche de la première à obtenir une collection, puis à extraire un élément à partir d'elle, alors qu'avec de la vanille en Javascript que vous venez de récupérer l'élément directement).Un bouton de réinitialisation n'a pas besoin de script à tous les (ou le nom ou l'id):
et vous avez terminé. Mais si vous avez vraiment doit utiliser le script, notez qu'à chaque contrôle de formulaire a un forme propriété qui fait référence à la forme, il en, de sorte que vous pouvez faire:
Mais un bouton de réinitialisation est un bien meilleur choix.
J'ai enfin résoudre le problème!!!!!
@RobG a raison à propos de la
form
tag ettable
tag. laform
balise doit être placée à l'extérieur de la table. avec qui,fonctionne sans avoir besoin de jquery ou autre chose. simple clic sur le bouton et tadaa~ l'ensemble de la forme de reset 😉 génial!
form
tag a été automatiquement fermé au début de latbody
, à l'exclusion des éléments d'entrée.En utilisant la fonction jquery .la plus proche(élément) et .trouver des(...).
Obtenir le parent élément et à la recherche pour le enfant.
Enfin, faire la fonction nécessaire.
$("#form").find("input[type=text], textarea").val("");
j'ai fait de cette façon- Je utiliser ce code simple:
Première ligne de réinitialiser les entrées d'un formulaire
Seconde pour réinitialiser select2
Facultatif: Vous pouvez l'utilisateur si vous avez différents types enregistré avec différents événements
Une rapide remise à zéro de la les champs de formulaire est possible avec cette jQuery fonction de réinitialisation.
quand vous avez à la réussite de réponse puis le feu de code ci-dessous.
$(selector)[0].reset();
Vous pouvez simplement ajouter un input type = reset avec un id = resetform comme ce
puis avec jquery, vous utilisez simplement la .cliquez sur la (les) fonction de l'élément avec l'id = resetform comme suit
et la forme réinitialise
Remarque: Vous pouvez également masquer le bouton de réinitialisation avec id = resetform à l'aide de votre css
Ici est la solution la plus simple avec Jquery. Il fonctionne à l'échelle mondiale. Jetez un oeil sur le code.
Ajouter une classe à un bouton dans chaque formulaire, vous devez le réinitialiser. Par exemple:
Façon la plus simple je pense off qui est robuste. Place à l'intérieur de la balise form.
Vous pouvez utiliser ce qui suit.
Puis d'effacer le formulaire:
Votre code devrait fonctionner. Assurez-vous que
static/jquery-1.9.1.min.js
existe. Aussi, vous pouvez essayer de revenir à lastatic/jquery.min.js
. Si cela résout le problème, alors que vous avez identifié le problème.configform
). Vous devriez faire quelques recherches à l'aide de la console. Essayez d'abord de$
. Si vous utilisez Chrome, en tapant$
dans la console pour activer un contexte sensible à la liste si jQuery est chargé. Si vous tapez$
et appuyez sur la touche retour, il va évaluer à une fonction si jQuery est chargé. Prochain essai$("#configform")
. Cliquez-droit sur le résultat et sélectionnezReveal in Elements panel
.