Javascript : Ajout de champ dynamique [Fermé]

Signaler
Messages postés
24
Date d'inscription
jeudi 6 mars 2008
Statut
Membre
Dernière intervention
27 avril 2009
-
 lanner -
Bonjour,
j'ai un problème avec l'ajout dynamique de champs dans un formulaire en javascript.
J'ai réussi en parcourant quelques scripts et forums à créer un formulaire de ce type : https://etudium.com/tmp/formulaire/index.htm

L'ajout et le retrait des champs marche très bien.
Le problème est que lorsque je clique sur '+'.
Le programme me rajoute bien un champ avec la possibilité de choisir une date mais il me vide le champ précédent.
Et avec IE 7 ça marche !

Si vous avez une idée je suis preneur car là je sèche ....

Pour le code, c'est ici :

champsDynamiques.js
var i = 0;
	
function create_champ(){
	if(i<1){
		document.getElementById('champs').innerHTML += "<div id='champs_"+i+"' style='display:block'>"+
		"Jour :<input type='text'size='8' readonly name='jour_"+i+"' id='jour_"+i+"' />"+
		"<input type='button' value='Cal' onClick=displayCalendar(document.getElementById('jour_"+i+"'),'dd/mm/yyyy',this) />"+
		"Heures :<input name='heures_"+i+"' size='2' type='text'/>"+
		"</div>";
	}
	else{
		document.getElementById('champs').innerHTML += "<div id='champs_"+i+"' style='display:block'>"+
		"Jour :<input type='text'size='8' readonly name='jour_"+i+"' id='jour_"+i+"' />"+
		"<input type='button' value='Cal' onClick=displayCalendar(document.getElementById('jour_"+i+"'),'dd/mm/yyyy',this) />"+
		"Heures :<input name='heures_"+i+"' size='2' type='text'/>"+
		"<input type='button' value='-' onClick='remove_champ("+i+")' />"+
		"</div>";
	}
	i++;
}
	
function remove_champ(i){
	var parent = document.getElementById("champs_"+i).parentNode;
	parent.removeChild(document.getElementById("champs_"+i));
}


index.html
<html>
<head>
<title>Saisie des heures par jour</title>
<script language="javascript" src="javascript/champs_dynamiques.js"></script>
<script language="javascript" src="javascript/dhtmlgoodies_calendar.js"></script>
<link type="text/css" rel="stylesheet" href="styles/dhtmlgoodies_calendar.css" media="screen" />
</head>
<body onLoad="create_champ();">
<form name="dates" method="post" action="#">
<div id='champs'></div>
<input class='input2' type='button' onClick='javascript:create_champ()' value='+' />
</form>
</body>
</html>


Merci

SuperResistant

4 réponses

Messages postés
35
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
5 septembre 2011
14
Et ca marche,

pour ceux que ca interesse :

--------------code javascript------------------------------------


function addATxtBx(ID){
var i = 0;
var valeurs = new Array();
var taille = document.getElementById(ID).length;
//alert(document.getElementById(ID).length);
for(i = 0; i < taille; i++){
valeurs[i] = document.getElementById(ID)[i].value;
}
document.getElementById(ID).innerHTML +="<input type='text'/><br/>";

for(i = 0; i < taille; i++){
document.getElementById(ID)[i].value = valeurs[i];
}
}

-----------------------------------------------------------------------
la logique :
il faut au prealable que vos elements se trouvent dans un formulaire (les textbox ou autres). On parcours le formulaire en question (mieux vaut n'y mettre que les elements voulu sinon il faudra rajouter un test pour chaque) puis une fois l'ajout effectue, on remet en place les valeurs. Simple hein ? J'avoue fallait quand meme y penser.
Le code est basique, il pourrait largement etre optimise et plus generique (comme passer le html a concatener en parametre) mais je l'ai fait en fonction de mon besoin dans l'immediat donc hesitez pas a le modifier si besoin est.
10
Merci

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

CCM 65492 internautes nous ont dit merci ce mois-ci

Salut

Je trouve ce script super bien mais comment l'utiliser dans un formulaire pour récupérer les valeurs de chaque champs ? (afin d'érire dans un txt)

merci :)
Messages postés
35
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
5 septembre 2011
14
Bonjour,

oui j'ai aussi le meme probleme.
Sauf que j'ai compris d'ou il vient (meme si je ne l'ai pas encore resolu). En fait en rajoutant de l'HTML en te basant sur l'HTML deja existant, le navigateur prends le HTML de base de ta page sans prendre en consideration toute modification ulterieur.

Bref il faudrait nous meme je pense remplir ces input text. Ma solution ?
Je n'en ai pas encore mais je veux bien tenter de stocker dans un tableau toutes les values deja presente dans les textbox avant d'en rajouter un puis je les remet a leur place.
Maintenant pour avoir acces a ces values il faut mettre la main sur le conteneur de nos textbox et y naviger via le tableau de ses elements.

Tout ca reste pure theorie mais je vais tester ca sur le champs et si ca marche bah je previendrais.
As tu trouve la solution a ton probleme pour que le champ java ne soit pas efface lorsque que tu en ajoutes un nouveau?
J'avoue avoir copie ton code et je voudrais aussi resoudre le meme probleme :)
Merci d'avance et a bientot
manu