begin process at 2012 05 29 01:52:46
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Ajout de champs dynamiquement dans un formulaire

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Ajout de champs dynamiquement dans un formulaire

jeudi 12 juillet 2007 à 18:33:56 | Ajout de champs dynamiquement dans un formulaire

evenkil

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>
<body>
<form action="Untitled-1.html" method="post">
<input type="text" name="periodeIn1" /> <input type="text" name="periodeOut1" /> <input type="text" name="prix1" /> <input type="button" value="ajouter une période" onclick="javascript:add_field()">
<div id="cible" name="cible"></div><br />
<br />
<input type="submit" value="Envoyer" />
</form>
</body>
</html>
jeudi 12 juillet 2007 à 22:10:42 | Re : Ajout de champs dynamiquement dans un formulaire

evenkil
J'ai avancé entre temps. Il y a juste le probleme du champs qui ne s'efface pas, je pense m'être trompé dans la syntaxe du removeChild.

<html>
<head>
<title>Document sans nom</title>
<script language="javascript">
<!--
function create_champ(i)
{
var i2 = i + 1;
document.getElementById('input_'+i).innerHTML = '<div id="champs_'+i+'"><tr><td>Periode '+i+'</td><td><input type="text" name="in_'+i+'"></td><td><input name="out_'+i+'" type="text"/></td><td><input name="prix_'+i+'" type="text"/></td><td><input type="button" value="X" onClick="javascript:supr_champ(i)"></td></tr></div></span>';
document.getElementById('input_'+i).innerHTML += (i <= 100) ? '<span id="input_'+i2+'"><input class="input2" type="button" onClick="javascript:create_champ('+i2+')" value="Ajouter une p&eacute;riode"></span>' : '';
}

function supr_champ(i)
{
document.getElementById('input_'+i).removeChild;
}
-->
</script>
</head>
<body>
<form name="toto">
<table width="600">
    <tr>
        <th width="32%">P&eacute;riode</th>
        <th width="17%">Date de d&eacute;but</th>
        <th width="17%">Date de fin</th>
        <th width="17%">Prix</th>
        <th width="17%">Effacer</th>
    </tr>
    <tr>
        <td>P&eacute;riode 1</td>
        <td><input type="text" name="in_1" id="in_1"></td>
        <td><input type="text" name="out_1" id="out_1"></td>
        <td><input type="text" name="prix_1" id="prix_1"></td>
        <td>-</td>
    </tr>
    <div id="champs_1"></div>
    </tr>
    <tr>
        <td colspan="5"><span id="input_2"><input name="button" type="button" class="input2" onClick="javascript:create_champ(2)" value="Ajouter une p&eacute;riode"></span></td>
    </tr>
</table>
</form>
</body>
</html>
jeudi 12 juillet 2007 à 23:40:51 | Re : Ajout de champs dynamiquement dans un formulaire

PetoleTeam

Membre Club

B onsoir...
et avec un truc du genre...
//--------------------
function supr_champ(i){
   var Parent;
  var Obj = document.getElementById ( 'input_'+i) ;
  if( Obj)       
    Parent = Obj.parentNode;       
    if( Parent)
      Parent.removeChild( Obj);
}
 ;0)
vendredi 13 juillet 2007 à 01:13:49 | Re : Ajout de champs dynamiquement dans un formulaire

evenkil
Effectivement ca fonctionne mais le soucis c'est que ca supprime tous les champs en dessous et le bouton pour ajouter les champs.
Par exemple, si j'ai 5 ligne, je veux supprimer la ligne 3, ca va également me supprimer la ligne 4 et 5.
Merci pour ton aide.
vendredi 13 juillet 2007 à 02:11:15 | Re : Ajout de champs dynamiquement dans un formulaire

evenkil
Bon beh j'ai un peu avance, reste le problème de supression.
Je post ou j'en suis.

<html>
<head>
<title>Document sans nom</title>
<script language="javascript">
<!--
function create_champ(i){
var i2 = i + 1;
    document.getElementById('input_'+i).innerHTML = '<div id="champs_'+i+'"><tr><td>P&eacute;riode.'+i+'</td><td><input type="text" name="in_'+i+'" id="in_'+i+'" maxlength="12" onClick="javacript:transpo('+i+')" /></td><td><input name="out_'+i+'" id="out_'+i+'" type="text" maxlength="12"/></td><td><input name="prix_'+i+'" id="prix_'+i+'" type="text"/></td><td><input type="button" value="X" onClick="javascript:supr_champ('+i+')"></td></tr></div>';
    document.getElementById('input_'+i).innerHTML += (i <= 100) ? '<span id="input_'+i2+'"><input class="input2" type="button" onClick="javascript:create_champ('+i2+')" value="Ajouter une p&eacute;riode"></span>' : '';
    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)
      Parent.removeChild( Obj);
}

function transpo(i) {
    document.getElementById('in_'+i).value = document.getElementById('out_'+(i-1)).value;
}
-->
</script>
</head>
<body>
<form name="palala">
<table width="400">
    <tr>
        <th width="20%">P&eacute;riode</th>
        <th width="20%">Date de d&eacute;but</th>
        <th width="20%">Date de fin</th>
        <th width="20%">Prix</th>
        <th width="20%">Effacer</th>
    </tr>
    <tr>
        <td>P&eacute;riode.1</td>
        <td><input type="text" name="in_1" id="in_1" maxlength="12"></td>
        <td><input type="text" name="out_1" id="out_1" maxlength="12"></td>
        <td><input type="text" name="prix_1" id="prix_1" maxlength="12"></td>
        <td>-</td>
    </tr>
    <div id="champs_1"></div>
    <tr>
        <td colspan="5"><span id="input_2"><input name="button" type="button" class="input2" onClick="javascript:create_champ(2)" value="Ajouter une p&eacute;riode"></span></td>
    </tr>
</table>
Nombre de champs : <input name="nombre" id="nombre" type="text" value="1" disabled size="3">
</form>
</body>
</html>
vendredi 13 juillet 2007 à 16:45:01 | Re : Ajout de champs dynamiquement dans un formulaire

PetoleTeam

Membre Club

B onjour...
Ton problème n'est pas exactement ce que je pensais, il est vrai que je n'avais pas lu le code en plein.

Quoiqu'il en soit il semble préférable d'aborder le problème avec
O_Table.insertRow()
 O_Table. insertCell()
pour l'insertion d'une nouvelle ligne et
 O_Table. deleteRow()
pour la destruction

;0)
jeudi 9 août 2007 à 12:00:59 | Re : Ajout de champs dynamiquement dans un formulaire

sananas
Comme je cherchais à faire un peu la même chose, je me suis interessé à ton code et je crois que j'ai trouvé ce qui manque dans ta fonction supprimer pour éviter de tous les effacer...

essai ça :

 function supr_champ(i)
{
  var Parent;
  var Obj = document.getElementById ( 'input_'+i) ;
 
 if( Obj)     
    Parent = Obj.parentNode;     
    if( Parent)
     Obj.removeChild(Obj.childNodes[0]);

}
pour moi ça marche...
mardi 6 novembre 2007 à 16:57:12 | Re : Ajout de champs dynamiquement dans un formulaire

Gamerz28111983
<input type="button" value="X" onClick="javascript:supr_champ('+i+')">


c etait juste ca le probleme
vendredi 7 décembre 2007 à 14:33:42 | Re : Ajout de champs dynamiquement dans un formulaire

maelob

Membre Club
Enfin tu aurais pu donner la solution aussi qui est d'enlever les + lol.
vendredi 7 décembre 2007 à 14:36:47 | Re : Ajout de champs dynamiquement dans un formulaire

maelob

Membre Club
Euuuuuuuuuh en faite je suis pas sur de ce que tu viens de dire car pour moi ce qu'il a écris c'est bon

1 2 3 4

Cette discussion est classée dans : input, champs, ajouter, var, document

Répondre à ce message

Sujets en rapport avec ce message

[déplacé Bar -> JS] tableaux [ par nabilwael ] Bonjour,j'ai ce fichier js :var i = 0;    function create_champ(){    if(i        document.getElementById('champs').innerHTML += " Name</label&gt Problème avec onchange sur un <input type="file" /> [ par ov3rdoze ] BonjourDans un formulaire qui me sert à ajouter des produits, je souhaiterais que l'utilisateur puisse ajouter un nombre indéfini d'images liées au pr Problème de création javascript dynamiquement [ par GoldPegasus ] Bonjourj'ai un soucis avec des élements que je crée dynamiquementvoici le code      var ligne = document.createElement("tr");   var col = document.cre Lancer une fonction après la fin d'exécution d'une autre fonction [ par bm3w325i ] Bonjour,Actuellement j'ai un input qui lors d'un Onclick se rempli par des coordonnées GoogleMaps, un fois rempli je récupère les données pour les aff trouver la valeur maxi [ par tonytruand ] Bonjour à tous,Quelqu'un pourrait il me dire ou je me trompe ? merci par avance.En fait je cherche à trouver la valeur maxi dans une liste d'input qui Problème affichage images sous ie [ par freemykl73 ] Bonjour à tous,Je cherche à mettre en place un script qui fait un décompte sur un site InternetJ'ai un petit problème avec ce script sous IE7: les ima div value [ par bossou ] bonjour à tous. je voudrais vous remercier tout un chacun pour les réponses pertinentes que vous apportez sur ce site. j'ai un autre problème dans le Ajout de champs dans un formulaire [ par neolitec ] Bonjour,J'ai cherché des moyens pour ajouter des champs dans mon formulaire, sans avoir recours à un rechargement de la page.J'avais écrit une fonctio valider un formulaire en javascript [ par Medgueye ] bonjourvoici un code que j'ai fait pour tester si mes champs sont vides:function ajouter_compagnie(){   if<font color=" Problème avec le Script: IMAGE QUI CHANGE AU SURVOL DE LA SOURIS image ... [ par xp3d ] Bon soir à tous,Il y a un Scipt en bas de cette page http://www.smkdgg.com/Filme.html "le code des deux boutons qui se mette en rouge disque on les su


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)