Ajout de champs de formulaire dynamique

**hash95** · 14/01/2008, 14h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**le_chomeur** · 14/01/2008, 15h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**hash95** · 14/01/2008, 16h40

Merci beaucoup ça marche

**SpaceFrog** · 14/01/2008, 16h42

oui sauf que je ne cautionne pas le setAttribute que je préfère remplacer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
tempInput.type="text";
tempInput.name="inputn_"+nbInput;

**le_chomeur** · 14/01/2008, 17h03

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é ??

**SpaceFrog** · 14/01/2008, 17h39

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

Ajout de champs de formulaire dynamique

JavaScript

Discussions similaires

Partager

Partager