Ajouter des éléments de formulaire sans PHP - HTML/CSS - Programmation
Marsh Posté le 24-02-2005 à 14:54:32
Y a possibilité en JS mais pas tout le monde le verra et ca sera temporaire
Marsh Posté le 24-02-2005 à 15:11:17
Oui oui évidement, ça reste en local etc. C'est juste que je veux que l'utilisateur choisisse le nombre d'infos qui rentre, donc c'est temporairement et juste pour lui que ça change.
Tu sais comment faire alors ?
Marsh Posté le 06-12-2005 à 21:22:11
Je fais un gros up de ce topic, car j'allais créer quasiment le même ...
Donc je pose la même question. Comment ajouter des champs texte, checkbox et autres, à la volée, en cliquant sur un bouton...
Je sais le faire en PHP, mais je sais que c'est possible en JS.
Merci
Edit : Je ne m'y connais que très peu en JS, je n'en fais quasiment jamais, j'ai essayé un truc dans le genre pour commencer :
La fonction :
Code :
|
Et le formulaire :
Code :
|
... pour essayer d'inscrire un simple champs en appuyant sur un bouton ... mais bien evidemment ça ne marche pas
Marsh Posté le 06-12-2005 à 21:51:08
Bon ben en cherchant à droite à gauche dans les fonction JS, j'ai réussi à faire ça :
Code :
|
Marsh Posté le 06-12-2005 à 21:57:25
document.createElement
et aussi Element.appenChild
exemple :
var monformulaire = document.getElementById("myform" )
var moninput = monformulaire.appendChild(document.createElement("INPUT" ));
moninput.type = "text";
bien entendu tu rajoute un id à ton formulaire
Marsh Posté le 06-12-2005 à 21:58:18
erf grilled, utilise plutot le getElementById et met un id sur ton formulaire. c'est plus conventionnel que ton truc zarbi
Marsh Posté le 06-12-2005 à 22:01:42
Ok, merci pour l'info
Marsh Posté le 06-12-2005 à 22:27:53
Voilà, si ça peut donner des idées à d'autres :
Code :
|
Le compteur est là pour 2 raisons. D'une part pour indiquer le nombre de champs affichés, mais surtout pour eviter d'effacer le bouton "moins" lorsqu'il n'y à plus de champs (car il efface le lastChild ... et s'il n'y a plus de champs, le lastChild est le bouton "moins" ).
Marsh Posté le 06-12-2005 à 22:29:15
Par contre j'aimerais bien savoir comment faire pour que les champs se retrouvent un au dessus de l'autre, et non un à côté de l'autre ...
Marsh Posté le 06-12-2005 à 22:33:17
J'ai modifié ça :
Code :
|
Mais pour le moment ça fait très goret
Je vais nettoyer tout ça
Marsh Posté le 06-12-2005 à 22:37:52
vire ca, un formulaire c'est jamais fait avec des tableau, mais des inputs, label et des <br>
il te suffit juste de rajouter un <br> après avoir ajouter un input tout simplement
exemple :
Code :
|
et sinon :
Code :
|
là faut supprimer deux enfants, puisque tu rajoute un BR en plus du input
Marsh Posté le 06-12-2005 à 22:50:32
Merci beaucoup
Ca va comme ça :
Code :
|
J'aimerais bien également ajouter un texte devant chaque champ, du genre "Champ 1", "Champ 2" etc...
j'ai utilisé un replaceData pour modifier le texte dans la balise <p> mais je me demande s'il n'existe pas mieux. J'ai vu à plusieurs reprise le terme innerHTML mais je crois avoir compris que c'est pour IE. Il doit sûrement exister une meilleur solution
Merci
Marsh Posté le 06-12-2005 à 23:26:39
Dj YeLL a écrit : J'ai vu à plusieurs reprise le terme innerHTML mais je crois avoir compris que c'est pour IE. Il doit sûrement exister une meilleur solution |
innerHTML ne fait pas partie de DOM mais tous les navigateurs le supportent.
La "bonne" méthode pour modifier le texte d'un élément c'est tonELement.firstChild.nodeValue = "..."
Pas la peine d'utiliser replaceData à moins d'avoir un besoin spécifique...
Marsh Posté le 06-12-2005 à 23:29:27
gatsu35 a écrit : vire ca, un formulaire c'est jamais fait avec des tableau, mais des inputs, label et des <br> |
Le "jamais" me choque... Je peux tout à fait avoir besoin d'avoir un formulaire dans un tableau. Lorsque ce formulaire représente des données tabulaires tout simplement (par exemple une matrice dont il faut donner les valeurs)
Par contre ton <br>, lui il ne faut jamais l'utiliser en effet. Si tu dois revenir à la ligne tu utilises des DIV.
Marsh Posté le 07-12-2005 à 00:19:45
Merci pour ces infos, je terminerai demain, sur ce, je vais me coucher !
Encore merci à tous.
++
Marsh Posté le 07-12-2005 à 01:44:02
gm_superstar a écrit : Par contre ton <br>, lui il ne faut jamais l'utiliser en effet. Si tu dois revenir à la ligne tu utilises des DIV. |
Des <label> en display: block et des fieldsets
Marsh Posté le 07-12-2005 à 07:22:46
gm_superstar a écrit : Le "jamais" me choque... Je peux tout à fait avoir besoin d'avoir un formulaire dans un tableau. Lorsque ce formulaire représente des données tabulaires tout simplement (par exemple une matrice dont il faut donner les valeurs) |
DIV c'est pas fait pour tout, trop de gens entendent div et on voit du caca partout. !!!!
un formulaire c'est :
FORM, FIELDSET, LEGEND, INPUT, TEXTAREA, LABEL, j'utilise des label pour revenir à la ligne dans un formulaire, car sinon d'une part tu ajoutes trop de code (<div></div> et d'autre part c'est un peu inutile).
le <br> me permet d'afficher correctement le formulaire si la personne n'a pas activé la feuille de style justement.
Marsh Posté le 07-12-2005 à 07:29:04
pour ajouter du texte devant chaque champ, normalement tu associes chaque champ à un label
<label for="monchamp"><input type="text" id="monchamp" value="truc">
donc il suffit tout simple de rajouter ceci :
Code :
|
ya plusieurs moyens
soit la technique du insertbefore, mais comme toi tu créés les champs à la volé, autant faire un document.appendChield(monnouveaulabel)
juste avant d'ajouter ton élément
Marsh Posté le 07-12-2005 à 11:23:51
Merci Ca ne fonctionnait pas mais ça m'a mis sur la voie :
Code :
|
J'ai dû faire un createTextNode, et ensuite faire un appendChild sur le label.
Marsh Posté le 07-12-2005 à 11:38:39
gm_superstar a écrit : innerHTML ne fait pas partie de DOM mais tous les navigateurs le supportent. |
Ca ne marche pas, j'ai une erreur JS :
Code :
|
Marsh Posté le 07-12-2005 à 11:46:40
en mettant ça ça marche :
Code :
|
Marsh Posté le 08-12-2005 à 01:07:35
gatsu35 a écrit : DIV c'est pas fait pour tout, trop de gens entendent div et on voit du caca partout. !!!! |
Heu non c'était pas vraiment mon propos... Il s'agit pas d'en mettre de partout mais de les utiliser là où on en a besoin, c'est à dire lorsqu'il s'agit d'empiler des groupes d'éléments de formulaires les uns sur les autres sachant qu'on va pas forcément utiliser un <fieldset> pour chaque ligne ni associer un <label> à chaque élément.
gatsu35 a écrit : j'utilise des label pour revenir à la ligne dans un formulaire, car sinon d'une part tu ajoutes trop de code (<div></div> et d'autre part c'est un peu inutile). |
A la limite pourquoi pas, mais on ne peut pas toujours faire comme ça (comment faire si j'ai 3 <input> avec leur <label> sur une ligne ?)
Encore une fois il ne s'agit pas de mettre des <div> pour le plaisir d'en mettre mais de les utiliser pour ce qu'il sont. Et à ce moment là il deviennent un élément structurant du code en séparant le formulaire en sections. Alors que si un coup j'ai un <label> de type en-ligne et un autre coup un <label> de type bloc, on perd la structure du formulaire au niveau du code.
gatsu35 a écrit : le <br> me permet d'afficher correctement le formulaire si la personne n'a pas activé la feuille de style justement. |
Ca reste très très rare ça... Et ça ne poserait pas autant de problème si tu ne détournais pas les <label> de leur utilisation première.
Marsh Posté le 08-12-2005 à 01:08:12
Dj YeLL a écrit : Ca ne marche pas, j'ai une erreur JS :
|
Ben ça marche chez moi... Il faut bien sûr que firstChild existe...
Marsh Posté le 08-12-2005 à 07:21:57
encore un truc justement :
le label peut être utilisé de deux manière :
<label for="monchamp">text</label><input id="monchamp" type="texte">
ou bien
<label>texte<input type="texte"></label>
je préfère utiliser la première methode qui est plus conventionnelle à mon gout et plus libre pour du style.
m'enfin bon on va pas se taper dessus pou un ou deux div de trop je le le conçois.
Du moment que 99,9% de ton code (gm_superstar) reste propre et optimisé (et je pense qu'il l'est) ya pas de soucis.
du moment que tu fais pas comme l'autre guignol de cidcreation
Marsh Posté le 28-02-2006 à 09:45:24
Bonjour tt le monde, als je suis debutante en php, et un peu d'aide serait la bienvenue.
d'abord,je veux égalemt faire un bouton "ajouter" qui lorsqu'il est cliqué ajoute un champ de texte.
1ere question: g vu qu'il était simple de le faire en php, ms comment? et est-ce qu'il vaut mieux le faire en php ou javascript?
2ème question: j'ai essayé votre solution en javascript, qui marche, mais jaurais voulu que les chps de texte s'ajoutent avant le bouton ajouter: voici mon code si je suis pas très claire:
<html>
<head>
<title> Essai formulaire </title>
<script language="JavaScript" type="text/javascript">
var nombreChamp = 6;
function test(what)
{
elem = document.createElement("input" );
elem.setAttribute("type", "text" );
elem.setAttribute("size", "30" );
elem.setAttribute("name", "theme" + nombreChamp);
document.getElementById("myform" ).appendChild(elem);
document.getElementById("myform" ).appendChild(document.createElement("br" ));
nombreChamp++;
}
</script>
</head>
<body>
<p id="infoChamp"> </p>
<form name="myform" id="myform" method="post" action="essai_formulaire2.php">
<h2> Etape 1: Générer les thèmes <p> </h2> <p>
Thème 1 <input type="text" name="theme1" size="30"> <br>
Thème 2 <input type="text" name="theme2" size="30"> <br>
Thème 3 <input type="text" name="theme3" size="30"> <br>
Thème 4 <input type="text" name="theme4" size="30"> <br>
Thème 5 <input type="text" name="theme5" size="30"> <br>
<input type="button" onclick="test('ajouter');" value="Ajouter un thème"> <br>
<input type="submit" value="Valider"> <br>
</form>
</body>
</html>
merci..
Marsh Posté le 31-05-2006 à 17:56:15
J'ai une question...
J'ai pris le meme script que Yell, avec les précieux conseils de Gatsu35, mais j'ai un probleme, qui est plus au niveau de la forme.
Voila le code Javascript :
Code :
|
Et la le code concernant les inputs en HTML, avec l'ajout du Javascript ci dessus :
Code :
|
Je joints aussi deux screenshots pour que vous essayer de comprendre mon probleme :
Avant :
Et Apres :
Comme vous pouvez voir les inputs se mettent à la fin du formulaire, alors que bien evidemment je voudrais qu'ils se mettent en dessous de l'input contact.
Quelqu'un saurait comment faire ?
Merci d'avance...
Marsh Posté le 31-05-2006 à 18:11:25
tu fais ton appendChild dans ton formulaire, normal que cela apparaisse à la fin
Il faut que tu utilises
Code :
|
Avec pour Référence, le noeud avant lequel tu veux ajouter ton bouzin...
Ah et ne recherche pas insertAfter n'existe po
Marsh Posté le 01-06-2006 à 09:37:37
euhhh, tu peux me donner un exemple, car je ne vois pas trop comment celà peut il fonctionner ?
Je m'y connais que tres peu en javascript
Merci d'avance !
Marsh Posté le 01-06-2006 à 09:56:44
une petite recherche sur google t'en donneras des tonnes d'exemple
Mais en voila un quand même:
Code :
|
Marsh Posté le 01-06-2006 à 10:09:52
ok, je vois ce qu'il faut faire, mais comment le faire en dehors du formulaire, car tu me dis que ca chie à cause du formulaire, à moins que c'est moi qui ai mal interprété
Marsh Posté le 01-06-2006 à 10:15:19
et feignant ça te dit pas de réflechir un peu
Code :
|
S'quand même pas compliqué:
- tu dois ajouter un nouveau noeud (Nouvel_Enfant)
- dans ton formulaire (Objet_Node)
- avant un element que tu détermine ( Référence), qui doit être le titre si j'ai tout compris
Marsh Posté le 01-06-2006 à 10:24:10
Bah je fais ca, dans la logique des choses devrait etre bon, mais il ne fait rien...
Code :
|
Marsh Posté le 01-06-2006 à 10:46:43
et l'erreur dans la console js c'est possible de l'avoir?
Marsh Posté le 01-06-2006 à 10:53:20
il me met ligne 70, char 4 : Argument non valide.
Alors qu'à la ligne 70 de mon code, c'est ca : "if (action == 'Ajouter un contact')", j'ai meme essayé d'enlever cette ligne, mais l'erreur reste toujours.
Moi y en a pas comprendre là...
Marsh Posté le 01-06-2006 à 10:57:33
De plus, j'ai la meme erreur quand je clic sur supprimer, chose qui est bizarre, car je ne suppose pas que Yell ai eu de probleme vis à vis de çà...
Marsh Posté le 01-06-2006 à 11:03:49
ligne 68 c'est ca : "function add_input(action)", l'entrée de la fonction, et la ligne ou je rentre dans le code qui gère le bouton supprimer est la suivante :"else if (action == 'Supprimer un contact' && nombreChamp > 0)
{".
ou l'accolade est situé à la ligne 81, donc là je suis largué, je ne comprends absolument pas pourquoi il me pete une erreur
Marsh Posté le 01-06-2006 à 11:12:27
bah je ne vois pas pourquoi tu veux que je te donne ce qu'il y a à la ligne 67 si l'erreur n'est pas ici ?
Marsh Posté le 24-02-2005 à 14:52:16
Bonjour,
Je voudrais créer un formulaire auquel je pourrais ajouter des éléments en appuyant sur un bouton.
En clair : j'ai un bouton "ajouter textField" et quand je clic dessus hop, un textfield apparait à la suite de ceux qui y étaient déjà. Ceci à l'infini.
En php c'est simple à faire, mais je voudrais faire ça sans avoir à solliciter le serveur à chaque changement. Y'a pas une possibilité en JS par exemple ? J'ai cherché sur plusieurs sites et fait quelques tests sans résultat