Javascript : Ajout de champ dynamique (bis) [Résolu/Fermé]

Signaler
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
-
 Utilisateur anonyme -
Bonjour,

Sur le forum j'ai trouvé comment ajouter des champs dynamiquement :
https://forums.commentcamarche.net/forum/affich-7063989-javascript-ajout-de-champ-dynamique

J'ai adapté le code :
Le 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>

Le code javascript (non du fichier : champsDynamiques.js)
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));
}


Le 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!

10 réponses


Tiens, un truc vite fait depuis le script que je t'ai donné avec les bouttons de suppressions :
<html>
<head>
<script>
function create_champ(i) {

var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = '<span id="ligne_'+i+'"><input type="text" name="fichier_'+i+'" id="fichier_'+i+'"><input type="button" value="x" id="boutton_'+i+'" 

onclick="suppr('+i+')"/><br /></span></span>';
document.getElementById('leschamps_'+i).innerHTML += '<span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>';

}

function suppr(i){
	document.getElementById("ligne_"+i).innerHTML="";
}
</script>
</head>
<body>
<span id="ligne_1"><input type="text" name="fichier_1" id="fichier_1"><input type="button" value="x" id="boutton_1" onclick="suppr(1)"/><br /></span>
<span id="leschamps_2"><a href="javascript:create_champ(2)">Ajouter un champs</a></span><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>
</body>
</html>


Ca marche (en tout cas avec IE8), mais il faut que tu l'adapte en fonction de ce que tu veux, encore une fois !
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
7
Un grand merci, ca marche aussi sous Firefox 3.5.6 sous Linux!!!!
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci


Ton problème se pose en PHP ou Javascript ?
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
7
Je dirais en JS ;)

J'aurai dis pareil, mais ton code php m'a... troublé !
Mais je crois que la solution est justement dans la conversation qui tu as donné !
https://forums.commentcamarche.net/forum/affich-7063989-javascript-ajout-de-champ-dynamique#3

Et puis, toi tu as rajouté des champs depuis PHP, donc il y en a déjà des champs. Je pense que au début du script, var i doit être égal au nombre de champ déjà présent, non ?
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
7
Tous les champs sont créés via le javascript, il n'y a pas de champ créé directement dans le code PHP
La solution est bien dans ce topic mais je ne sais pas comment le mettre dans mon code

C'est vrai que ce n'est pas des plus explicites...
Regarde ici : http://www.editeurjavascript.com/scripts/scripts_formulaires_3_653.php
J'ai testé ce script et miracle, aucun champs n'est vidé ! A toi de l'adapter.
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
7
Merci pour le lien!
J'aurai aimer avoir le bouton supprime, j'ai tenté de faire mixte avec l'autre script mais ca ne marche pas..
Il parle de document.getElementById(nomDeVotreDiv).style.display = "none"; mais je ne sais pas quoi en faire
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test ajout champ</title>
<script>
function create_champ(i) {

var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = '<div id="champs_'+i+'" style="display:block">'+
						    '<input type="text" name="champ_'+i+'">'+
						    '<input type="button" value="Supprimer" onClick="supprime_champ('+i+')" />'+
						    '</div>';
						    
document.getElementById('leschamps_'+i).innerHTML +='<span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>';
}

function supprime_champ(i){
	var parent = document.getElementById('champs_'+i).parentNode;
	parent.removeChild(document.getElementById('champ_'+i));
}
</script>
</head>
<body>
<input type="text" name="champ_1" /><br />
<span id="leschamps_2"><a href="javascript:create_champ(2)">Ajouter un champs</a></span>
</body>
</html>
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
7
J'arrive à supprimer le dernier mais je supprime aussi le lien d'ajout....
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test ajout champ</title>
<script>
function create_champ(i) {

var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = '<input type="text" name="champ0_'+i+'">'+
						    '<input type="text" name="champ1_'+i+'">';
						    
document.getElementById('leschamps_'+i).innerHTML += '<br /><span id="leschamps_'+i2+'">'+
						     '<a href="javascript:create_champ('+i2+')">Ajouter un champs</a>'+
						     '<a href="javascript:supprime_champ('+i+')">Supprime un champs</a></span>';
}
function supprime_champ(i){
	var parent = document.getElementById('leschamps_'+i).parentNode;
	parent.removeChild(document.getElementById('leschamps_'+i));
}
</script>
</head>
<body>
<input type="text" name="champ0_1" /><input type="text" name="champ1_1" /><br />
<span id="leschamps_2"><a href="javascript:create_champ(2)">Ajouter un champs</a></span>
</body>
</html>

:-D A beintôt !
PS: N'oublie pas de mettre la conv en résolu !