Remplir un formulaire avec jQuery

Posté par seiyar81 le 7 janvier 2014 | Laisser un commentaire (0)
jQuery Populate

Lorsque vous developpez une application Web, disons en PHP par exemple et que vous devez assigner vous-même les valeurs aux champs d’un formulaire, le mélange HTML/PHP peut vite s’avérer indigeste.

Si vous disposez de données JSON, ou de la possibilité de formater des données dans ce format, pour remplir votre formulaire, alors le plugin jQuery Populate devrait répondre à tous vos besoins.

Imaginons le formulaire HTML suivant :

	

Vous récupérez un jeu de données JSON via une requête AJAX ou bien directement formaté dans la page du type :

  var data = {

		name: "Yriase",

		type: ["0","2"],

		valider: false,

		comment: "Commentaire plus long"

	}

Grâce à Populate vous n’avez plus qu’à réaliser l’appel suivant :


	$('form["myform"]').populate(data);

Et le tour est joué !

Catégorie: Développement Web, Javascript | Laisser un commentaire (0)

Niceforms 2.0 : De jolis formulaires en Javascript

Posté par seiyar81 le 9 novembre 2009 | Laisser un commentaire (0)
Niceforms

Qui ne n’est jamais pris la tête pour styliser ses formulaires, que tout soit bien aligné, compatible avec tous les navigateurs récents, et en plus joli ?

Et bien Lucian Slatineanu a la solution à tous vos problèmes ! Cet américain comme son nom l’indique à tout simplement créé un script JS qui modifie le code HTML de vos formulaires pour les rendre tous beaux tous propres ! Le script injecte en réalité du CSS pour styliser les formulaires à l’aide d’images.

On appréciera la simplicité enfantine de la mise en place du script, en effet il vous suffit d’inclure le fichier Javascript :

...

...

Vous pouvez ensuite choisir de styliser tel formulaire ou tel formulaire en ajoutant simplement une propriété class :

...

Sachez que rien ne vous empêche de modifier les images ou le code si le coeur vous en dit, le tout étant disponible sous licence Creative Commons. De plus un PSD est fourni avec les images, plutôt pratique.

Vous pouvez voir le script en action ici et le télécharger ici.

Catégorie: Développement Web | Laisser un commentaire (0)