Sujet Précédent Sujet Suivant

Javascript : Ajout de champ dynamique

Fermé
Super Resistant Messages postés 24 Date d'inscription jeudi 6 mars 2008 Statut Membre Dernière intervention 27 avril 2009 - 25 juin 2008 à 10:08
 lanner - 10 janv. 2010 à 15:01
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

Réponse 1 / 4
Mastaking Messages postés 35 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 5 septembre 2011 14
24 juin 2009 à 03:30
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
Réponse 2 / 4
lanner
10 janv. 2010 à 15:01
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 :)
1
Réponse 3 / 4
Mastaking Messages postés 35 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 5 septembre 2011 14
22 juin 2009 à 02:36
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.
0
Réponse 4 / 4
manuint
7 juin 2009 à 16:09
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
-3

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
javascript:void(0);
nano -
JCVD -

18 réponses
java activée mais ne fonctionne pas !
chating -
chating -

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

13 réponses