Sujet Précédent Sujet Suivant

Javascript : Ajout de champ dynamique (bis)

Résolu/Fermé
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010 - 21 déc. 2009 à 11:59
 Utilisateur anonyme - 22 déc. 2009 à 18:20
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!
A voir également:

10 réponses

Réponse 1 / 10
Utilisateur anonyme
22 déc. 2009 à 17:16
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
Réponse 2 / 10
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010 7
22 déc. 2009 à 18:14
Un grand merci, ca marche aussi sous Firefox 3.5.6 sous Linux!!!!
1
Réponse 3 / 10
Utilisateur anonyme
21 déc. 2009 à 18:57
Ton problème se pose en PHP ou Javascript ?
0
Réponse 4 / 10
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010 7
21 déc. 2009 à 19:02
Je dirais en JS ;)
0

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

Posez votre question
Réponse 5 / 10
Utilisateur anonyme
21 déc. 2009 à 19:19
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 ?
0
Réponse 6 / 10
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010 7
21 déc. 2009 à 19:52
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
0
Réponse 7 / 10
Utilisateur anonyme
22 déc. 2009 à 10:16
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.
0
Réponse 8 / 10
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010 7
22 déc. 2009 à 16:18
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>
0
Réponse 9 / 10
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010 7
22 déc. 2009 à 17:12
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>
0
Réponse 10 / 10
Utilisateur anonyme
22 déc. 2009 à 18:20
:-D A beintôt !
PS: N'oublie pas de mettre la conv en résolu !
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses
[Javascript] Tables de Multiplication
pigeonus -
hachim -

6 réponses