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

A voir également:

Javascript : Ajout de champ dynamique
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Echo javascript ✓ - Forum PHP
A javascript error occurred in the main process - Forum Handicap / Accessibilté
Javascript obfuscator - Télécharger - Langages

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.

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

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.

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

Discussions similaires

java activée mais ne fonctionne pas !

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters