Javascript : Ajout de champ dynamique (bis)

Résolu
JypX Messages postés 68 Statut Membre -  
 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!
Configuration: Linux
Firefox 3.5.6

10 réponses

  1. Utilisateur anonyme
     
    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
  2. JypX Messages postés 68 Statut Membre 7
     
    Un grand merci, ca marche aussi sous Firefox 3.5.6 sous Linux!!!!
    1
  3. Utilisateur anonyme
     
    Ton problème se pose en PHP ou Javascript ?
    0
  4. JypX Messages postés 68 Statut Membre 7
     
    Je dirais en JS ;)
    0

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

    Posez votre question
  7. JypX Messages postés 68 Statut Membre 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
    0
  8. Utilisateur anonyme
     
    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
  9. JypX Messages postés 68 Statut Membre 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>
    0
  10. JypX Messages postés 68 Statut Membre 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>
    0
  11. Utilisateur anonyme
     
    :-D A beintôt !
    PS: N'oublie pas de mettre la conv en résolu !
    0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Arrondir nombre Math.round
ohklik -
Sugel -

1 réponse
javascript arrondi après la virgule
cap -
Thomas -

4 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse