begin process at 2010 08 01 01:12:35
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Formulaire Dynamique (Ajout, suppression)


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

Formulaire Dynamique (Ajout, suppression)

lundi 20 août 2007 à 11:08:44 | Formulaire Dynamique (Ajout, suppression)

boudafc

Bonjour,

Voilà, j'essaye de créer un formulaire dynamique avec possibilité d'ajouter ou de supprimer des champs.
Pour le moment, je fais mon test sur l'ajout ou la suppression de boutons.

Le script que j'ai fait fonctionne bien la première fois, mais la deuxième pas correctement.
Par exemple, je créé 3 boutons la première fois que je supprime (en cliquant dessus). La seconde fois, je ne pourrais supprimer que le quatrième !

Je viens de voir pourquoi ça ne fonctionne pas (eh oui, je réfléchi même pendant que j'écris mon post !)
C'est que je supprime ce qu'il y a entre les balises <span> que j'ai créé dynamiquement, mais je n'éfface pas la balise !!!

Si quelqu'un a une idée ou une autre technique, merci !

Mon script:

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
<!--
var n = 0;
function ajout() {
    n++;
    document.getElementById('toto').innerHTML += '<div id="'+n+'"><input type="button" id="'+n+'" value="'+n+'" onclick="supprimer(\''+n+'\')" /></div>';
    document.getElementById('tata').value = n;
}

function supprimer(k) {

    if( n >= 0) {
        document.getElementById(k).innerHTML = '';
        n--;
        document.getElementById('tata').value = n;
    }
}
//-->
</script>
</HEAD>
<BODY>

<form  id="frm">
    <input type="text" value="tata" id="tata" name="affichage" />
    <input type="button" value="ajouter" onclick="ajout();" />
    <span id='toto'></span>
   
</form>
</BODY>
</HTML>


lundi 20 août 2007 à 12:33:11 | Re : Formulaire Dynamique (Ajout, suppression)

bultez

Membre Club
Réponse acceptée !






Bonjour,

si tu veux gérer "normalement" (?) les ajouts/suppressions/modifications...
    d'éléments dans un  formulaire ou ailleurs,
    regarder du coté des ...node..,...child...   ici par exemple

    innerHTML, c'est très pratique pour ajouter, tout effacer...
       mais les performances se dégradent si "on en abuse", et
       les modif,supressions partielles... connait pas.


Cordialement            Bul         [mon Site]     [M'écrire]
En général, c'est absurde de généraliser.
lundi 20 août 2007 à 16:51:01 | Re : Formulaire Dynamique (Ajout, suppression)

boudafc

Hello !

Merci beaucoup, ça m'a beaucoup aidé, j'ai reussi à faire ce que je voulais en terme de fonctionnalité, cependant, en terme de mise en page, pas évident, je souhaiterais au moins, sauter une ligne entre chaque champs... si quelqu'un a une idée !

Je met le code que j'ai fait, ça peut toujours aider quelqu'un:

<html><head><title>Test</title></head>
<body>


<input type="button" value="ajouter" onclick="ajouter();" />
<input type="button" value="supprimer" onclick="supprimer();" />

<span id="Ingredients"></span>

</tr>
</table>


<script language="JavaScript" type="text/javascript">
<!--
var n = 0;

  function supprimer() {
    document.getElementById("Ingredients").removeChild(document.getElementById(n));
    n--;
  }
 
  function ajouter() {
    n++;
    var nouveauChampsTexte = document.createElement("input");
    var nouveauMaillon = document.getElementById("Ingredients").appendChild(nouveauChampsTexte);
    nouveauMaillon.type="text";
    nouveauMaillon.id=n;
    nouveauMaillon.name=n;
    nouveauMaillon.value=n
  }
//-->
</script>
</body></html>


lundi 20 août 2007 à 16:59:08 | Re : Formulaire Dynamique (Ajout, suppression)

boudafc

Oublier ce que j'ai dis plus en haut pour la mise en page... je viens de trouver quelque chose... je viendrais compléter mon code plus tard !


samedi 19 décembre 2009 à 21:41:48 | Re : Formulaire Dynamique (Ajout, suppression)

JypX

Ce code se rapproche ce que j'aimerai faire. A la place de rajouter un champ "text", j'aimerai rajouter du code html pour rajouter des lignes de plusieurs champs (text, select, etc...) à un formulaire en rajoutant la variable n au nom de chaque champs :
ex :
Code HTML :
<tr>

      <td>Nom</td>

      <td><input value="" name="nom_varableN" type="text"></td>
      <td>Prénom</td>

      <td><input value="" name="prenom_varableN" type="text"></td>
</tr>
lundi 21 décembre 2009 à 12:22:12 | Re : Formulaire Dynamique (Ajout, suppression)

JypX

J'ai trouvé (presque) mon bonheur : http://www.commentcamarche.net/forum/affich-7063989-javascript-ajout-de-champ-dynamique

J'ai adapté le code mais il reste un problème quand je rajoute un champ, je vide les autres... Mais pas quand je supprime un champ. Il y a bien une solution de proposé mais je ne sais pas comment l'utiliser! Il n'y a pas plus simple?

Code PHP :
<?
	$n_champ = $_POST['n'];     //Nombre de champs envoyés par le formulaire

for ($n=0; $n<=$n_champ; $n++){    //Boucle pour charger en variable les données envoyées
		$champ[] = $_POST['champ_'.$n];
}
?>
<html>
<head>
<title>Test ajout de champs dans un formulaire</title>
<script language="javascript" src="champsDynamiques.js"></script>  <!-- chemin du javascript -->
</head>
<body onLoad="creer_champ();">                                     <!-- Créer le 1er champ -->
<?
echo "Nombre de champs envoyer par le formulaire : ".$n_champ."<br />";
for ($n=0; $n<=$n_champ; $n++){             //Boucle pour afficher les données envoyées
	if ($_POST['champ_'.$n] <> null){   //Pour ne pas afficher les champs vides
		echo "champ ".$n." : ".$champ[$n]."<br />";
	}
}
?>
<br />
<form name="dates" method="post" action="">   <!-- Début du formulaire -->
<div id='champs'></div>                       <!-- Affiche le résultat de la fonction javascript -->
<input class='input2' type='button' onClick='javascript:creer_champ()' value='Ajouter un champ' />
<input type="submit" name="Submit" value="Valider">
</form>
</body>
</html>

Code Javascript :
var i = 1;
	
function creer_champ(){
		document.getElementById('champs').innerHTML +="<div id='champs_"+i+"' style='display:block'>"+  // Donne un id au champ en fonction de la variable i
		"Champ "+i+" :<input name='champ_"+i+"' size='10' type='text'/>"+  // le champ qui va être envoyé (le champ a pour nom : champ_"variable_i")
		"<input type='hidden' name='n' value="+i+">"+  // champ caché pour envoyer le nombre de champs créés (variable i)
		"<input type='button' value='Supprimer' onClick='supprime_champ("+i+")' />"+  // Bouton pour supprimer un champ
		"</div>";
	i++;
}
	
function supprime_champ(i){
	var parent = document.getElementById("champs_"+i).parentNode;
	parent.removeChild(document.getElementById("champs_"+i));
}


Cette discussion est classée dans : dynamique, formulaire, document, ajout, getelementbyid


Répondre à ce message

Sujets en rapport avec ce message

nom de champ de formulaire dynamique [ par patou06 ] Bonjour à tous, j'ai une liste de champs de formulaire dynamique: et dans une fonction javascript je veux les parcourir, j'avais penser à : document URGENT !! validation formulaire avec php [ par romainst ] Bonjour j'ai un énorme problème que je dois résoudre rapidement c'est pour ça que j'en appelle à votre aide,J'ai créé récemment ce formulaire de vote Redirection dans le formulaire [ par piep14 ] Bonjour le forum,Je cherche a envoyer le résultat d'un formulaire dans deux pages différentes selon le choix de la langue : Jj'ai essayé function en document.getElementById("formulaire") has no properties [ par Dohny ] Bonjour à tous !Voilà, je préviens d'abord, je ne suis pas expert en javascript ! Néanmoins, j'ai une erreur qui apparait lors de l'exécution d'un scr Problème avec un bouton Submit sous forme d'image [ par titoursdu38 ] Bonjour à tous !Je suis en train de travailler sur un formulaire, et je ne parviens pas à envoyer mon formulaire après le clic sur l'image.J'utilise u compatibilité javascript [ par camellion2 ] Bonjour a tous, Je suis novice en programmation et je me suis fait un petit site web pour me simplifier la vie au taf. Le problême c'est qu'au bureau bug affichage image avec firefox sur serveur [ par maher17 ] Bonjour tout le monde, dans le cadre de développement d'une application web avec php, j'ai eu besoin de quelque traitement sur les images à afficher t Urgent!problème de fonction pour afficher un tableau [ par tagadax ] Bonjour j'ai un problème, j'ai un projet a terminer pour lundi, et je suis bloqué pour afficher un tableau voici ma fonction : [code=js]function decis regex javascript compatibilité [ par camellion2 ] Bonjour à tous, J'ai un souci avec une regex sous javascript qui me permet de verifier que l'utilisateur a bien tapé un entier ou un décimal du type Position relative de calques... problèmeS [ par lunelautre ] [u]Bonjour j'ai des calques de menu (invisibles quand non actifs) dont la position est relative ... en fonction de la taille de la fenêtre du navigate


Nos sponsors


Sondage...

CalendriCode

Août 2010
LMMJVSD
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Consulter la suite du CalendriCode

 
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 : 3,822 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales