Javascript : Ajout de champ dynamique

Super Resistant Messages postés 24 Date d'inscription Statut Membre Dernière intervention -
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

Afficher la suite

A voir également:

Javascript : Ajout de champ dynamique
Telecharger javascript - Télécharger - Langages
A javascript error occurred in the main process - Forum Handicap / Accessibilté
Erreur #125 javascript - Forum Mozilla Firefox
Afficher un tableau javascript en html ✓ - Forum Javascript
Javascript arrondi - Forum Javascript

4 réponses

Réponse 1 / 4

Mastaking Messages postés 35 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 2 / 4

lanner

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 :)

Réponse 3 / 4

Mastaking Messages postés 35 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 4 / 4

manuint

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

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

a javascript error occurred in the main process

Votre réponse

Discussions similaires