Ajouter des éléments de formulaire sans PHP

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Ajouter des éléments de formulaire sans PHP

Luigi

Living's easy with eyes closed

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

Publicité

esox_ch

Y a possibilité en JS mais pas tout le monde le verra et ca sera temporaire

---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait

Luigi

Living's easy with eyes closed

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 ?

Dj YeLL

$question = $to_be || !$to_be;

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 :

function test()
{
window.document.myform.write('<input type="text">');
}

Et le formulaire :

Code :

<form name="myform">
<input type="button" onclick="test();">
</form>

... pour essayer d'inscrire un simple champs en appuyant sur un bouton ... mais bien evidemment ça ne marche pas

Message édité par Dj YeLL le 06-12-2005 à 21:23:56

---------------
Gamertag: CoteBlack YeLL

Dj YeLL

$question = $to_be || !$to_be;

Bon ben en cherchant à droite à gauche dans les fonction JS, j'ai réussi à faire ça :

Code :

function test()
{
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
document.forms.myform.appendChild(elem);
}

Message édité par Dj YeLL le 06-12-2005 à 21:51:21

---------------
Gamertag: CoteBlack YeLL

gatsu35

Blablaté par Harko

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

gatsu35

Blablaté par Harko

erf grilled, utilise plutot le getElementById et met un id sur ton formulaire. c'est plus conventionnel que ton truc zarbi

Dj YeLL

$question = $to_be || !$to_be;

Ok, merci pour l'info

---------------
Gamertag: CoteBlack YeLL

Dj YeLL

$question = $to_be || !$to_be;

Voilà, si ça peut donner des idées à d'autres :

Code :

<html>
<head>
<script language="JavaScript" type="text/javascript">
var nombreChamp = 0;
function test(what)
{
if(what == 'plus')
{
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
document.getElementById("myform" ).appendChild(elem);
nombreChamp++;
}
else if(what == 'moins' && nombreChamp > 0)
{
var childlast = document.getElementById("myform" ).lastChild;
document.getElementById("myform" ).removeChild(childlast);
nombreChamp--;
}
document.getElementById("infoChamp" ).firstChild.replaceData(0,35,'Il y a actuellement ' + nombreChamp + ' champs.');
}
</script>
</head>
<body>
<p id="infoChamp">Il y a actuellement 0 champs.</p>
<form name="myform" id="myform">
<input type="text" name="nombre" value="" size="30">
<input type="button" onclick="test('plus');" value="+">
<input type="button" onclick="test('moins');" value="-">
</form>
</body>
</html>

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" ).

---------------
Gamertag: CoteBlack YeLL

Dj YeLL

$question = $to_be || !$to_be;

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

---------------
Gamertag: CoteBlack YeLL

Publicité

Dj YeLL

$question = $to_be || !$to_be;

J'ai modifié ça :

Code :

if(what == 'plus')
{
var ligne = document.createElement("tr" );
var colonne = document.createElement("td" );
ligne.appendChild(colonne);
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
colonne.appendChild(elem);
document.getElementById("myform" ).appendChild(colonne);
nombreChamp++;
}

Mais pour le moment ça fait très goret

Je vais nettoyer tout ça

---------------
Gamertag: CoteBlack YeLL

gatsu35

Blablaté par Harko

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 :

document.getElementById("myform" ).appendChild(elem);
document.getElementById("myform" ).appendChild(document.createElement("BR" );

et sinon :

Code :

else if(what == 'moins' && nombreChamp > 0)
{
var childlast = document.getElementById("myform" ).lastChild;
document.getElementById("myform" ).removeChild(childlast);
var childlast = document.getElementById("myform" ).lastChild;
document.getElementById("myform" ).removeChild(childlast);
nombreChamp--;
}

là faut supprimer deux enfants, puisque tu rajoute un BR en plus du input

Message cité 1 fois

Dj YeLL

$question = $to_be || !$to_be;

Merci beaucoup

Ca va comme ça :

Code :

var nombreChamp = 0;
function test(what)
{
if(what == 'plus')
{
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
elem.setAttribute("name", "champ" + nombreChamp);
document.getElementById("myform" ).appendChild(elem);
document.getElementById("myform" ).appendChild(document.createElement("BR" ));
nombreChamp++;
}
else if(what == 'moins' && nombreChamp > 0)
{
for(var i = 0;i < 2;i++)
{
var childlast = document.getElementById("myform" ).lastChild;
document.getElementById("myform" ).removeChild(childlast);
}
nombreChamp--;
}
document.getElementById("infoChamp" ).firstChild.replaceData(0,35,'Il y a actuellement ' + nombreChamp + ' champs.');
}

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

Message cité 1 fois

---------------
Gamertag: CoteBlack YeLL

gm_superstar

Appelez-moi Super

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

Message cité 1 fois

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

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.

Message cité 2 fois

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Dj YeLL

$question = $to_be || !$to_be;

Merci pour ces infos, je terminerai demain, sur ce, je vais me coucher !

Encore merci à tous.

++

---------------
Gamertag: CoteBlack YeLL

masklinn

í dag viðrar vel til loftárása

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

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

gatsu35

Blablaté par Harko

gm_superstar a écrit :

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.

Message cité 1 fois

gatsu35

Blablaté par Harko

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 :

if(what == 'plus')
{
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
elem.setAttribute("name", "champ" + nombreChamp);
elem = document.getElementById("myform" ).appendChild(elem);
var labelElem = document.insertBefore(document.createElement("LABEL" ),elem);
label.nodeValue = "Montexte";
label.for = "monchamp";
elem.id = "monchamp";
document.getElementById("myform" ).appendChild(document.createElement("BR" ));
nombreChamp++;
}

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

Dj YeLL

$question = $to_be || !$to_be;

Merci Ca ne fonctionnait pas mais ça m'a mis sur la voie :

Code :

if(what == 'plus')
{
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
elem.setAttribute("name", "champ" + nombreChamp);
elem.setAttribute("id", "champ" + nombreChamp);
var labelElem = document.createElement("label" );
labelElem.setAttribute("for", "champ" + nombreChamp);
var labelText = document.createTextNode("Choix " + nombreChamp);
labelElem.appendChild(labelText);
document.getElementById("listeChamp" ).appendChild(labelElem);
document.getElementById("listeChamp" ).appendChild(elem);
document.getElementById("listeChamp" ).appendChild(document.createElement("BR" ));
nombreChamp++;
}

J'ai dû faire un createTextNode, et ensuite faire un appendChild sur le label.

Message édité par Dj YeLL le 07-12-2005 à 11:24:25

---------------
Gamertag: CoteBlack YeLL

Dj YeLL

$question = $to_be || !$to_be;

gm_superstar a écrit :

Ca ne marche pas, j'ai une erreur JS :

Code :

Erreur : document.getElementById("infoChamp" ).firstChild.nodeValue is not a function

Message cité 1 fois

---------------
Gamertag: CoteBlack YeLL

Dj YeLL

$question = $to_be || !$to_be;

en mettant ça ça marche :

Code :

document.getElementById("infoChamp" ).firstChild.data = 'Il y a actuellement ' + nombreChamp + ' champs.';

---------------
Gamertag: CoteBlack YeLL

gm_superstar

Appelez-moi Super

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.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

Dj YeLL a écrit :

Ca ne marche pas, j'ai une erreur JS :

Code :

Erreur : document.getElementById("infoChamp" ).firstChild.nodeValue is not a function

Ben ça marche chez moi... Il faut bien sûr que firstChild existe...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gatsu35

Blablaté par Harko

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

luna_35

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

krovomi

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 :

var nombreChamp = 1;
function add_input(action)
{
//alert(nombreChamp);
if (action == 'Ajouter un contact')
{
var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
document.getElementById("compte_rendu" ).appendChild(elem);
document.getElementById("compte_rendu" ).appendChild(document.createElement("BR" ));
nombreChamp++;
}
else if (action == 'Supprimer un contact' && nombreChamp > 0)
{
for (var i = 0; i < 2; i++)
{
var childlast = document.getElementById("compte_rendu" ).lastChild;
document.getElementById("compte_rendu" ).removeChild(childlast);
}
nombreChamp--;
}
if (nombreChamp > 1)
{
document.getElementById("ContactChamp" ).firstChild.replaceData(0, 20, 'Contacts : ');
//document.getElementById("FonctionChamp" ).firstChild.replaceData(0, 35, 'Fonctions : ');
}
else
{
document.getElementById("ContactChamp" ).firstChild.replaceData(0, 20, 'Contact : ');
//document.getElementById("FonctionChamp" ).firstChild.replaceData(0, 35, 'Fonction : ');
}
}

Et la le code concernant les inputs en HTML, avec l'ajout du Javascript ci dessus :

Code :

<form name="compte_rendu" id="compte_rendu" method="post" action=<?=$_SERVER["PHP_SELF"]?>>
<table>
<tr>
<td>Auteur : </td><td><input type=text name="auteur" value="<?=$utilisateur->nom." ".$utilisateur->prenom?>" size=30><br></td></tr>
<tr><td>Date : </td><td><input type=text name="date" value="<?=$date['mday']."/".$date['mon']."/".$date['year']?>" size=20><br></td></tr>
<tr><td id="ContactChamp">Contact : </td><td><input type=text name="contacts" value="Nom..." onFocus="if (this.value=='Nom...') {this.value=''}" OnBlur="if (this.value=='') {this.value='Nom...'}" size=20>    
<input type=text name="fonction" value="Profession..." onFocus="if (this.value=='Profession...') {this.value=''}" onBlur="if(this.value=='') {this.value='Profession...'}" size=20>        
<input type=button value="Ajouter un contact" onCLick="add_input('Ajouter un contact');">  
<input type=button value="Supprimer un contact" onCLick="add_input('Supprimer un contact');"></td></tr>
<tr><td>Titre : </td><td><input type=text name="titre" value="" size=81><br></td></tr>
<tr><td>Texte : </td><td><textarea name="corps" value="" rows=25 cols=60></textarea><br></td></tr>
<tr><td> </td></tr>
<tr><td> </td><td><input type=submit name=Envoyer value="Envoyer">    <input type=reset name=Effacer value="Effacer"></td></tr>
</table>
</form>

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... :hello:

anapajari

s/travail/glanding on hfr/gs;

tu fais ton appendChild dans ton formulaire, normal que cela apparaisse à la fin [:spamafote]
Il faut que tu utilises

Code :

Set Objet_Node = Objet_Node.insertBefore(Nouvel_Enfant, Référence)

Avec pour Référence, le noeud avant lequel tu veux ajouter ton bouzin...

Ah et ne recherche pas insertAfter n'existe po

krovomi

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 !

anapajari

s/travail/glanding on hfr/gs;

une petite recherche sur google t'en donneras des tonnes d'exemple
Mais en voila un quand même:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<script type="text/javascript">
function test(){
var newNode=document.createElement('hr');
document.getElementById('pouet').insertBefore(newNode, document.getElementById('truc'));
}
</script>
</head>
<body>
<div id="pouet">
<div id="truc">truc</div>
</div>
<input type="button" value="test" onclick="test()"/>
</body>
</html>

krovomi

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é :pt1cable:

anapajari

s/travail/glanding on hfr/gs;

et feignant ça te dit pas de réflechir un peu

Code :

Objet_Node.insertBefore(Nouvel_Enfant, Référence)

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

krovomi

Bah je fais ca, dans la logique des choses devrait etre bon, mais il ne fait rien...

Code :

var elem = document.createElement("input" );
elem.setAttribute("type", "text" );
document.getElementById("compte_rendu" ).insertBefore(elem, document.getElementById("titre" ));

anapajari

s/travail/glanding on hfr/gs;

et l'erreur dans la console js c'est possible de l'avoir?

krovomi

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

krovomi

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 çà...

anapajari

s/travail/glanding on hfr/gs;

ligne 68?

krovomi

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

Message édité par krovomi le 01-06-2006 à 11:05:12

anapajari

s/travail/glanding on hfr/gs;

ligne 67?

krovomi

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 ?

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Ajouter des éléments de formulaire sans PHP

Sujets relatifs
Post d'un formulaire d'une fenetre fille vers une fenetre mère!	Récupérations infos formulaire dans ce meme formulaire
Pb de connection PHP	Solution pour ne pas reloader mon menu flash ! (FRAMES/PHP/CSS ?)
[PHP] systeme de rdv	[Résolu][Perl/Gtk2] Récupérer les éléments d'un Gtk2::TreeView
Axis Cam IP et PHP	Validation de formulaire
comment faire un double lien en PHP ? [reglé]	Livre d'Or en PHP
Plus de sujets relatifs à : Ajouter des éléments de formulaire sans PHP

Page générée en 0.187 secondes