Création de div à la volée

[shepounet]

Bonjour à tous et à toutes,

Je vous expose mon problème. Je développe un site pour gérer une bibliothèque (projet dans le cadre de mes études en licence informatique).
J'ai donc naturellement une page qui permet aux bibliothécaires d'ajouter un livre. On retrouve dans cette page des informations banales : titre, auteur, année d'édition, etc...

Mais il y a un champ nommé "Site" permettant de savoir sur quels sites se trouvent le livre. Par exemple : B.U Besancon, B.U Vesoul, etc... (Oui, oui je viens de Franche Comte, mais passons... )
Un livre se trouve sur un nombre indéterminé de bibliothèque.

J'ai donc créé un input text :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<td>
	<div> 
		<input type  = 'text'
		   name  = 'site'
		   id    = 'site'
		   value = '$site'
		   title = 'Site o&ugrave; se trouve le livre.'
	</div>
	<div>
		<input type='hidden'
			   name  = 'id_site'
			   id    = 'id_site'
			   value = '$id_site'/>
	</div>
...

J'ai fais une autocompletion en AJAX, et le champ hidden me permet de récupérer l'id du site correspondant dans la base de données.
Le problème est le suivant :

Un bibliothécaire pourra insérer un site, mais comment lui permettre d'en ajouter d'autre ?
J'ai pensé à ajouter un bouton "+" qui permettrait d'ouvrir un autre input text et lui permettre d'ajouter un autre site, et ceci indéfiniment.

Mais voilà, quelques problèmes techniques persistent :

- comment créer des divs à la volée en javascript ?
J'ai essayé de trouver sur google mais rien de concluant. La fonction clone() de JQuery n'a pas l'air vraiment adapté.

- Je pensais mettre les id des sites correspondant dans mon champ "hidden" à la suite, et séparé par une virgule. On aura donc par exemple dans le champ caché :
value = "1;3;24;254".
Cependant, le bibliothécaire peut insérer des sites qui ne sont pas connu dans la base de données.
Donc concrètement : Comment savoir le nombre de div créé par l'utilisateur à la volée et comment récupérer les valeurs (on ne peut pas mettre le même id pour chaque input).

J'espère avoir été assez clair, et que quelqu'un pourra m'éclairer.

Cordialement,
shepounet

[NoSmoking]

Bonjour,

- comment créer des divs à la volée en javascript ?

via les méthodes createElement et appendChild

Code :

1
2
3
4
5
6
// creation nouvel element
var oInput = document.createElement('INPUT');
// type text pour saisie
oInput.setAttribute( 'type', 'text');
// ajout element a la FORM
oForm.appendChild( oInput);

Comment savoir le nombre de div créé par l'utilisateur à la volée et comment récupérer les valeurs (on ne peut pas mettre le même id pour chaque input).

je pense qu'en mettant un NAME sous forme de tableau il sera plus facile de récupérer les infos coté serveur

Code :

1
2
3
4
5
6
7
8
// creation nouvel element
var oInput = document.createElement('INPUT');
// type text pour saisie
oInput.setAttribute( 'type', 'text');
// name sous forme array
oInput.setAttribute( 'name', 'biblio[]')
// ajout element a la FORM
oForm.appendChild( oInput);