Ajout de champs de formulaire dynamique

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

voilà j'ai un bout de code qui rajoute des champs de formulaire à chaque clic sur un bouton.
Je voudrais le modifier pour que celui-ci affiche un nombres définis de champs.
Par exemple on entre le nombre de champs dans un champs texte puis on clique sur un bouton et les champs apparaissent (sans rechargement de la page si possible).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<script type="text/javascript">
//<![CDATA[
function create_champ(i)
{
var i2 = i + 1;
 
document.getElementById('input_'+i).innerHTML = '<div id="champs_'+i+'">Nom d\'utilisateur '+i+' : <input name="user_login_'+i+'" type="text" onKeyUp="myplugin_ajax_elevation(this.form.user_login_'+i+', \'user_'+i+'_message\');" /> <span id="user_'+i+'_message"></span></div>';
document.getElementById('input_'+i).innerHTML += (i <= 10000) ? '<div id="input_'+i2+'"><input class="input2" type="button" onClick="javascript:create_champ('+i2+')" value="Ajouter un utilisateur"></div>' : '';
}
//]]>
</script>
<div class="wrap">
<h2>Ajouter un nouvelle utilisateur</h2>
 
<form action="#add-new-user" method="post" name="adduser" id="adduser">
<?php wp_nonce_field('add-user') ?>
 
<div id="champs_1">
Nom d'utilisateur 1 &nbsp;: &nbsp;<input name="user_login_1" type="text" onKeyUp="myplugin_ajax_elevation(this.form.user_login_1, 'user_1_message');" />
<span id="user_1_message"></span>
</div>
 
<div id="input_11"><input name="button" type="button" class="input2" onClick="javascript:create_champ(2)" value="Ajouter un utilisateur"></div>
</form>
</div>

Merci

désolé pas le temps de commenter ... :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
		var nbInput = 0; //On utilise une variable globale pour éviter d'avoir des inputs avec le même nom...
	function ajouterChamps(){
		var nbChampsAjout = document.getElementById('nbChamps').value;
		var DivToAdd = document.getElementById('divTest');
		if(nbChampsAjout <= 0){alert('Veuillez indiquer le nombre de champs à ajouter');}
		else{
			for(var i = 0 ; i < nbChampsAjout; i++){
				nbInput++;
				tempInput = document.createElement('input');
				tempInput.setAttribute("type","text");
				tempInput.setAttribute("name","inputn_"+nbInput);
				DivToAdd.appendChild(tempInput);
			}
		}
 
		document.getElementById('inner').value = "CONTENU DE LA DIV APRES AJOUT<br />############################################<br />" + document.getElementById('divTest').innerHTML;
 
	}
</script>
</head>
 
<body>
<div id="divTest">
<input type="text" name="nbChamps" id="nbChamps"/>
<input type="button" name="ajoutChamps" value="Ajouter" onclick="ajouterChamps()"/><br />
<textarea rows="8" cols="70" id="inner"></textarea>
</div>
</body>
</html>

Bonne journée

14/01/2008, 16h40
hash95

Merci beaucoup ça marche ;)
14/01/2008, 16h42
SpaceFrog
oui sauf que je ne cautionne pas le setAttribute que je préfère remplacer par
Code:

1 2 3 tempInput.type="text"; tempInput.name="inputn_"+nbInput;
14/01/2008, 17h03
le_chomeur

Effectivement on peut également affecter les propriétés de l'input après sa création, plutot qu'affecter par la méthode setAttribute mais qu'elle est la différence hormis la compatibilité ??
14/01/2008, 17h39
SpaceFrog

aucune mais c'est surtout pour des raisons de compatibilité !!!