Sujet Précédent Sujet Suivant

Ajout de champs dynamiquement dans un formulaire

evenkil Messages postés 35 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 15 avril 2014 - 12 juil. 2007 à 18:33
kurapikt Messages postés 1 Date d'inscription jeudi 10 janvier 2008 Statut Membre Dernière intervention 13 mars 2010 - 13 mars 2010 à 21:22
Bonjour,


Etant débutant en JavaScript et dhtml, je sollicite un peu
de votre aide pour créer une page. Je n’arrive pas a ajouter dynamiquement des
champs dans un formulaire.
Voici l’objectif que je me suis donné:


- Réaliser une page avec3 champs input text cote à cote + un bouton "ajouter "
button (c'est fait)


- Lorsque l’on a rempli les 3 input text, on clique sur le
bouton ajouter pour rajouter 3 champs en dessous + un bouton « ajouter »
button. (c'est fait)


- Le 1er bouton "ajouter" se transforme en un bouton "X" et lorsqu'on clique dessus ca efface la ligne. (capottage total ! je ne sais pas comment m'y prendre )


Pour ceux qui ont le FAI Free, c'est le meme concept que dans l'interface d'administration du routeur, lorsqu'on ajoute ou supprime une redirection de ports.


Merci beaucoup pour vos aides précieuses. Cordialement


Voici en attendant ce que j'ai deja réalisé


<html>
<head>
<title>Document sans nom</title>
<script>
function add_field() {
  var d = document.getElementById('cible');
  var n = d.childNodes.length;
  var p = document.createElement("p");
  d.appendChild(p);
  var input = document.createElement("input");
  input.type = 'text';
  input.name = 'periodeIn'+n;
  var input2 = document.createElement("input");
  input2.type = 'text';
  input2.name = 'periodeOut'+n;
  var input3 = document.createElement("input");
  input3.type = 'text';
  input3.name = 'prix'+n;
  p.appendChild(input);
  p.appendChild(input2);
  p.appendChild(input3);
  document.getElementById('cible').style.visibility = 'visible';

}
</script>
</head>

<form action="Untitled-1.html" method="post">


</form>

</html>

36 réponses

Précédent
  • 1
  • 2
Réponse 21 / 36
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
30 janv. 2008 à 15:46
euh ça a l'air juste. essaie ça

    champ.setAttribute ('maxlength', '45');

sinon dans firefox tu as la console javascript qui te permet souvent de comprendre tes erreurs de javascript outils->console javascript. Vide la de toutes ses erreurs et reessaye de créer un element et regarde l'erreur.
0
Réponse 22 / 36
acquatella Messages postés 8 Date d'inscription mercredi 30 janvier 2008 Statut Membre Dernière intervention 19 février 2008
30 janv. 2008 à 16:05
Ca ne fonctionne pas non plus ?

Et la console FireFox ne me donne aucune erreur ?

Par contre sous FireFox l'option fonctionne !?
Donc la c'est un problème de navigateur ...

Merci de ton aide.
bonne journée

Acquatella.
0
Réponse 23 / 36
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
1 févr. 2008 à 17:01
Bonjour,
faire l'essai avec
champ.maxLength = 45;
;O)
0
Réponse 24 / 36
acquatella Messages postés 8 Date d'inscription mercredi 30 janvier 2008 Statut Membre Dernière intervention 19 février 2008
19 févr. 2008 à 13:25
Merci PetoleTeam

Je vais essayer.

Acquatella.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 25 / 36
golgot55 Messages postés 3 Date d'inscription jeudi 17 juin 2004 Statut Membre Dernière intervention 10 août 2009
6 août 2009 à 16:20
Hello!

Ben chez moi ça fonctionne mais seulement quand je clique 2X sur le bouton de suppression.

??? Vous avez une idée?
0
Réponse 26 / 36
Gamerz28111983 Messages postés 7 Date d'inscription vendredi 17 mars 2006 Statut Membre Dernière intervention 6 août 2009
6 août 2009 à 18:40
on peut voir ton script ?
0
Réponse 27 / 36
golgot55 Messages postés 3 Date d'inscription jeudi 17 juin 2004 Statut Membre Dernière intervention 10 août 2009
7 août 2009 à 14:18
Bien entendu que vous pouvez le voir :

<html>
<head>
<title>Document sans nom</title>
<script language="javascript">
<!--
function create_champ(i){
var i2 = i + 1;
document.getElementById('input_'+i).innerHTML = '
<tr><td>Période.'+i+'</td><td></td><td></td><td></td><td></td></tr>
';
document.getElementById('input_'+i).innerHTML += (i <= 100) ? '' : '';
document.getElementById('in_'+i).value = document.getElementById('out_'+(i-1)).value;
document.getElementById('nombre').value = i;
}

function supr_champ(i){
var Parent;
var Obj = document.getElementById ( 'input_'+i) ;

if( Obj)
Parent = Obj.parentNode;
if( Parent)
Obj.removeChild(Obj.childNodes[0]);

}

function transpo(i) {
document.getElementById('in_'+i).value = document.getElementById('out_'+(i-1)).value;
}
-->
</script>
</head>

<form name="palala">
Période |
Date de début |
Date de fin |
Prix |
Effacer |

----

Période.1,
,
,
,

----


Nombre de champs :
</form>

</html>

Je vois pas ou ça coince
0
Réponse 28 / 36
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
7 août 2009 à 14:48
Bonjour,

@golgot55
marrant de déterrer de vieux messages....

quand à ce que vous nous montrez :
ça fonctionne avec FF3, IE8....
pas testé avec d'autres navigateurs,
mais, mon foie, pas de raisons que
cela ne baigne pas...


Cordialement
0
Réponse 29 / 36
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
7 août 2009 à 15:03
Bonjour Bul, (et aux autres aussi)

Il est très vieux ce topic. Si Bul dis que c'est bon ya pas de raison que ça soit autrement!

Sinon c'est beau la nouvelle version de CS!


Maelo ou Elo --> Mon blog
Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
0
Réponse 30 / 36
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
7 août 2009 à 15:18
bonjour maelob !!!!
longtemps qu'on n'avait eu le plaisir de te lire
( ton baigne j'espère pour toit )

remarque que je n'ai que regardé l'ajout et
la suppression uniquement avec IE et sur l'exemple...

si cela se trouve il y a autre chose... ailleurs
comme le script me semble alambiqué....
0
Réponse 31 / 36
maelob Messages postés 943 Date d'inscription mardi 14 novembre 2006 Statut Membre Dernière intervention 7 août 2009 3
7 août 2009 à 15:23
Tout baigne, tout baigne, sauf la reprise des cours mais ma foi on fait avec.
Le script m'a fait peur et je n'ai plus le temps de faire du javascript donc je ne pourrai point l'aider.



Maelo ou Elo --> Mon blog
Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

<fon
0
Réponse 32 / 36
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
7 août 2009 à 16:38
aller... ch'tiot exemple,
dans un tableau comme la source de golgot55,
on peut faire autrement bien entendu
( div contenant input text et button
avec createElement+appendChild par exemple ) 


<form name= "frm">
 Période  |
Date début |
Date fin |
prix |
 |

</form>
<script type ="text/javascript">
var tab=document.getElementById("tableau");
function suppression(btn)
{	tab.deleteRow(btn.parentNode.parentNode.rowIndex);
for ( var l=1;l<tab.rows.length;l++ )
{	tab.rows[l].cells[0].innerHTML=l;	}
}
function ajout()
{	var l = tab.insertRow(tab.rows.length);
var c=l.insertCell(l.cells.length);
c.innerHTML=l.rowIndex;
l.insertCell(l.cells.length).innerHTML=
"";
l.insertCell(l.cells.length).innerHTML=
"";
l.insertCell(l.cells.length).innerHTML=
"";
l.insertCell(l.cells.length).innerHTML=
"";
l.onmouseover=function()
{	this.style.backgroundColor="#FFFFDD";	}
l.onmouseout=function()
{	this.style.backgroundColor="transparent";	}
}
</script>


_ on ajoute en fin de tableau
_ on supprime n'importe quelle ligne
_ si envoi vers le serveur :
$_POST ou $_GET['datDeb'] 'datFin' 'prix'
sont des arrays, plus simple à gérer.
0
Réponse 33 / 36
golgot55 Messages postés 3 Date d'inscription jeudi 17 juin 2004 Statut Membre Dernière intervention 10 août 2009
10 août 2009 à 08:55
Hello!

Juste un petit mot pour dire que je suis pas un grand pro du javascript, vous l'aurez remarqué.
Mais merci pour l'exemple! Ca fonctionne nickel...

Golgot.

:-o)(o-:
0
Réponse 34 / 36
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 août 2009 à 10:04
améliorations ( suppression ) : 
///////////////////////////////////////////
function suppression(btn)	// supprimer //
/////////////////////////////////////////
{	var a=btn.parentNode.parentNode.rowIndex;
tab.deleteRow(a);
for ( var l=a;l<tab.rows.length;l++ )
{	tab.rows[l].cells[0].innerHTML=l;	}
}

il doit en rester... ( des améliorations à faire )
0
Réponse 35 / 36
eddy916 Messages postés 10 Date d'inscription dimanche 2 août 2009 Statut Membre Dernière intervention 25 octobre 2009
15 août 2009 à 13:37
Bonjour,
Merci pour le code, qui correspond parfaitement a ce que je cherchais!!
Cependant, j'ai un petit problème pour le "style" des champs ajoutés. Voila, j'ai modifié le script afin de l'adapter a mes besoins (pas de bouton supprimé, pas de période auto incrémentée non plus) par contre, j'aurai voulu garder le même style css que les champ déjà affiché ainsi que la taille de ceux-ci.
Voici le scripte : 
 <script type="text/javascript">

var tab=document.getElementById("tableau");

function suppression(btn)

{	tab.deleteRow(btn.parentNode.parentNode.rowIndex);

for ( var l=1;l<tab.rows.length;l++ )

{	tab.rows[l].cells[0].innerHTML=l;	}

}

function ajout()

{	var l = tab.insertRow(tab.rows.length);


l.insertCell(l.cells.length).innerHTML=

"";

l.insertCell(l.cells.length).innerHTML=

"";

l.insertCell(l.cells.length).innerHTML=

"";

l.onmouseover=function()

{	this.style.backgroundColor="#FFFFDD";	}

l.onmouseout=function()

{	this.style.backgroundColor="transparent";	}

}

</script>


et voici le code HTML des champs a "reproduire" 
<td></td>
                <td></td>
                <td></td>
              </tr>
              
            </table>
              
              
              

                Simply add


Et là, il ne prend pas en considération le "length" et si je met "size" il ne me le prend pas non plus, tout comme "style". Ne sachant pas du tout programmer du "javascript" si quelqu'un sais comment il faut que je fasse, ca m'enlèverai une bonne épine du pieds!!
Merci d'avance,
eddy
0
Réponse 36 / 36
kurapikt Messages postés 1 Date d'inscription jeudi 10 janvier 2008 Statut Membre Dernière intervention 13 mars 2010
13 mars 2010 à 21:22
mon pb c lorsque j 'ajoute des champs par exemple 3 champs ca marche mais a l'envoie il m'affiche que la première enregistrement ds la base de donnee php mysql pq?
0

Discussions similaires

UserForm (formulaire) , aprés exécution impossible d'afficher la Civilité
Utilisateur anonyme -
cs_Le Pivert -

3 réponses
Formulaire de reservation
Louido -
neigedhiver -

2 réponses
Remplir un formulaire PDF à partir di'un fichier excel
bgame -
the_little_big_man -

3 réponses
Formulaire de demande de congés
cs_sarrayosra -
syndrael -

3 réponses
"civilité" obligatoire dans formulaire
tautie -
Bul3 -

16 réponses
Rejoignez-nous