High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Javascript : Ajout de champ dynamique

Dernière réponse le 24 jun 2009 à 03:30:28 Super Resistant, le 25 jun 2008 à 10:08:53 
 Signaler ce message aux modérateurs

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 : http://www.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
Configuration: Windows XP
Firefox 3.0

Meilleures réponses pour « Javascript : Ajout de champ dynamique » dans :
Javascript - Effacer un champ de formulaire lors du clic (focus) VoirIl vous est sûrement arrivé de tomber sur un formulaire HTML avec des valeurs pré-remplies décrivant par exemple le type de valeur attendue. L'intention est louable mais il est désagréable de devoir sélectionner ce texte et le supprimer avant de...
Javascript - Connaître la hauteur d'un élément HTML VoirSi vous souhaitez connaître la hauteur (height) d'un bloc HTML en javascript, il existe deux façons selon les navigateurs : element.offsetHeight element.style.pixelHeight Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Javascript - Introduction au langage Javascript VoirQu'est-ce que le Javascript? Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des...
Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...
Posez votre question Répondre

1

manuint, le 7 jun 2009 à 16:09:13

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

   
Répondre à manuint

2

Mastaking, le 22 jun 2009 à 02:36:33

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.

   
Répondre à Mastaking

3

 Mastaking, le 24 jun 2009 à 03:30:28
  • +2

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.

   
Répondre à Mastaking
Posez votre question Répondre
Ils ont besoin de votre aide