Comment obtenir une clé/valeur de l'ensemble de données à partir d'un formulaire HTML
Je suis simplement à la recherche d'un moyen de obtenir toutes les valeurs à partir d'un <form>
.
J'ai cherché sur le Web pour un certain temps, de tomber sur FormData
, ce qui semble tout à fait ce que je cherche.
Cependant son API est pas disponible sur n'importe quel navigateur, j'ai donc besoin d'une alternative.
Ce dont j'ai besoin dans mon cas précis est un objet de paires clé/valeur. Par exemple:
<form>
<input type="text" name="firstname" value="John" />
<input type="text" name="surname" value="doe" />
<input type="email" name="email" value="" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
</form>
L'objet doit être:
{
firstname: "John",
surname: "doe",
email: "",
gender: ""
}
Edit: ci-dessus est juste un exemple, il devrait fonctionner non seulement avec <input>
mais aussi avec les autres balises (par exemple,<select>
, <textarea>
et ainsi de suite... même <input type="file">
doit être pris en charge).
- quand vous dites "même
<input type="file">
doit être pris en charge" qu'attendez-vous de la sortie? Vous attendez-vous la totalité du contenu d'un gigantesque fichier doit être sérialisé comme une chaîne de caractères? Attendez-vous d'un objet de référence qui peut être utilisé pour lire le fichier? Vous attendez-vous la valeur réelle du champ (qui est juste un aseptisé nom du fichier)? - aussi, votre sortie attendue ne tient pas compte de plusieurs éléments de formulaire avec le même nom ou de ce qui se passe lorsque vous utilisez
<select multiple>
. - accepteriez-vous d'ajouter un peu de HTML supplémentaire comme
method
etaction
des attributs à votreform
et invisibleiframe
?
Vous devez vous connecter pour publier un commentaire.
Sans une forte définition de ce qui doit se passer avec le bord des cas, et quel est le niveau de prise en charge du navigateur est nécessaire, il est difficile de donner une seule réponse parfaite à la question.
Il y a beaucoup de comportements de formulaire qui sont faciles à manquer, c'est pourquoi je recommande d'utiliser un bien entretenu fonction à partir d'une bibliothèque, comme jQuery
serializeArray()
:Je comprends qu'il y a un gros push récemment à se déplacer loin de inutilement dont jQuery, donc pour ceux qui sont intéressés à la vanille, JS solution
serializeArray
tout simplement pas le faire.La prochaine difficulté est de déterminer quel est le niveau de prise en charge du navigateur est nécessaire.
HTMLFormElement.les éléments
simplifie considérablement d'une sérialisation de mise en œuvre, et en sélectionnant la forme associée à des éléments sans elle, c'est assez compliqué.Considérer:
Conforme de la mise en œuvre doit inclure les
input
élément. Je suppose que je peut utiliser, et laissez-polyfills destinés à la prise en exercice pour le lecteur.Après qu'il serais difficile de savoir comment
<input type="file"/>
doit être pris en charge. Je ne suis pas vif sur inutilement la sérialisation des éléments de fichier en une chaîne de caractères, j'ai donc fait l'hypothèse que la sérialisation sera de la saisie du nom et de la valeur, même si la valeur est pratiquement inutile.Enfin, une structure d'entrée d':
Est excessivement naïf comme il ne tient pas compte de
<select multiple>
éléments, ou les cas où les deux entrées ont le même nom. J'ai fait l'hypothèse que l'entrée serait mieux comme:...et de nouveau laisser transformer cela en une structure différente, comme un exercice pour le lecteur.
Me donner teh codez déjà!
Vous pourrait aller pour une manière manuelle (ci-Dessous le code n'est pas testé si);
si vous utilisez une bibliothèque, ce serait plus facile.
Par exemple:- en jQuery:
dans ce code formObjects contient tous les input, select et textarea et d'autres éléments de formulaire tags. donc, nous n'avons pas besoin de rechercher manuellement chaque comme dans la plaine de JS. Sauf pour les boutons radio (Comme @enhzflep implicite, cela ne fonctionne pas correct pour input[type=radio] )
Mais si vous utilisez jQuery, vous pouvez directement utiliser jQuery serialize() fonction pour saisir l'ensemble de la forme par des paires nom-valeur.
Vous devez générer manuellement le json/javascript objet avant de l'envoyer au serveur.
Devrait être une méthode onSubmit qui permettrait de choisir chaque de la forme de la valeur d'entrée et de créer un objet qui peut ensuite être envoyé vers le serveur de la page.
Vous pouvez consulter cette réponse qui est similaire à ce que vous recherchez:
Convertir les données de formulaire à l'objet JavaScript avec jQuery
Suffit d'utiliser jQuery.
HTML:
JS:
serializeArray()
mais je préfère éviter d'utiliser jQueryPardon ma précipitation pour ne pas le formatage de l'exemple, Mais il est bon de comprendre. Cliquez sur "Obtenir Toutes les Valeurs' pour voir la paire clé/valeur en alerte.
JS Fiddle
$('form').serializeArray()
?$('form').serializeArray()
si elle correspond à l'exigence. Mais le résultat diffère. J'ai trouvéserializeArray()
un peu compliquer alors que vous avez plusieurs de sélectionner et de cases à cocher. Il répète la clé avec tous les différents sélectionner des valeurs. Par exemple, si vous avez des cases à cocher que la sortie sera.[ {checkbox: "checkbox1", checkbox: "checkbox2" }]
. Mais la coutume code que j'ai écrit, produire de la[{checkbox:["checkbox1","checkbox2"]}]
. Ce code personnalisé minimise la sortie et sera beaucoup plus facile de trackdown et de valider si quelqu'un le souhaite. Les deux sont goode, mais le choix dépendJe suggère que vous utilisez les sélecteurs css pour sélectionner les entrées à partir de votre formulaire: querySelector et querySelectorAll.
Voici la code de travail et voici le code js.
Bien sûr, vous pouvez modifier les sélecteurs pour vos besoins.
J'espère que ce sera utile et bonne chance à vous.
Ici est la pure javascript solution qui donne le signal pour tous les types d'entrées dans un formulaire, y compris les fichiers.
Exemple de sortie
JS:
CSS:
HTML:
La fin de la partie, mais c'est comment je le fais:
JS:
HTML: