Script de création de champ

**xKryckx** · 29/01/2015, 11h11

Bonjour à tous, j'aurai besoin d'un petit coup de main pour un script de création de champ qui ne fonctionne pas.
Voici déjà le code:

Code html :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>sans titre 1</title>
 
<script language="javascript">
<!--
/*function create_champ()
{
var i = parseInt(document.getElementById('nombre').value)
var i = i + 1;
if(i<'4'){
document.getElementById('nombre').value = i;
document.getElementById('zone_dynamique').innerHTML += '<div align="left" id="champ_"'+i+'> Nom du champ '+i+' :<input type="text" name="nom_test_'+i+'"> Choix '+i+' :<select name=" choix_test_'+i+'></select> <input name="suppr" type="button"  onClick="javascript:supprime_champ()" value="Supprimer un champ"></div>';
}
else{
alert('Vous avez atteint le nombre maximum de ligne');
exit();
}
 
}
function supprime_champ(){
	var cpt = parseInt(document.getElementById('nombre').value);
	cpt--;
	var parent = document.getElementById('zone_dynamique');
	var NodeListe = parent.getElementsByTagName("div"); 
 
 
	if( NodeListe.length >= 2 ){
		var Enfant=NodeListe[NodeListe.length-1]
		parent.removeChild(Enfant);
		document.getElementById('nombre').value = cpt
	}		
 
 
}*/
 
 
-->
</script>
 
 
<script>
  function choixChange(){
     var paragraphe = document.getElementById("paragrapheSupplementaire");
     paragraphe.innerHTML=document.getElementById("choix").hidden;
     if (document.getElementById("choix").value == "liste_1" || document.getElementById("choix").value == "bouton_1"){
        paragraphe.innerHTML+="<label>Rentrez les informations:</label>"
        +'<input name=sous_choix type="text">';
        /*+'<select name="orientation" id="orientation">'
        +'<option value="LP">LP</option>'
        +'<option value="master">master</option>'
        +"<option value=\"inge\">Ecole d'ingé</option>"
        +'<option value="boulot">Boulot</option>'
        +'<option value="autre">Autre</option>'
        +'</select>';*/
    
     }
  }
  choixChange();
</script>
 
</head>
 
<body>
 
<form id="test" name="test23" method="post" action="test_traitement23.php">
Nombre de champs : <input name="nombre" id="nombre" type="text" value="1" size="3">
 
 
	<div id="zone_dynamique">
		<div align="left"> Nom du champ: 
			<input name="nom_test" type="text"/>
		Choix : <select name="choix_test" id="choix" onchange='choixChange();'>
			<option value="test_1" selected="selected">Choisir un type</option>
			<option value="champ_texte_1">Champ de texte</option>
	        <option value="zone_email_1">Zone d'adresse e-mail</option>
	        <option value="liste_1">Liste déroulante</option>
	        <option value="bouton_1">Boutons radio</option>
	        <option value="case_1">Cases à cocher</option>
	        <option value="zone_texte_1">Zone de texte</option>
		</select>
		</div>
 
		<div id="paragrapheSupplementaire">
 
        </div>
		<input type="submit" value="envoyer"/>
	</div>	
</form>
 
</body>
 
</html>

Et ma page de traitement:

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
36
37
38
39
40
41
42
<?php
print_r($_POST);
$serveur = "localhost";
$base = "xxx";
$user = "root";
$pass = "xxx";
 
/*
$mysqli est une nouvelle instance de la classe mysqli
prédéfinie dans php et hérite donc de ses propriétés et méthodes
connexion à la base de données
*/
$mysqli = new mysqli($serveur, $user, $pass, $base);
// si la connexion se fait en UTF-8, sinon ne rien indiquer
$mysqli->set_charset("utf8");
/*
utilisation de la méthode connect_error
qui renvoie un message d'erreur si la connexion échoue
*/
if ($mysqli->connect_error) {
    die('Erreur de connexion ('.$mysqli->connect_errno.')'. $mysqli->connect_error);
}
else {
    echo 'connexion réussie : '.$mysqli->host_info;
}
 
$sql = '
INSERT INTO `test23`(
	`nom_test`, `choix_test`, `sous_choix`
) VALUES (
	\''.$_POST['nom_test'].'\', \''.$_POST['choix_test'].'\', \''.$_POST['sous_choix'].'\'
);
';
$result = $mysqli->query($sql);
 
echo $sql;
 
$mysqli->close();	
 
header("Location: test23.php");
 
?>

En fait, je mets autant de champ que je veux dans une div pour créer un formulaire et grâce à mon code JS, je recopie ce qu'il y a dans la div pour me créer de nouveaux champs!
C'est très bien mais je me heurte à certains problèmes notamment au niveau de la liaison avec la base de données.
C'est à dire que dans ma base de données, mon champ nom va s’appeler "nom_test" alors que dans mon code JS, j'ai besoin d'incrémenter cette variable nom pour quelle soit différente (avec "nom_test_'+i+'" par exemple).
Du coup, je ne vois pas comment faire en sorte que cette variable "nom_test_'+i+'" soit reconnu dans ma base de données?

Auriez vous une idée pour moi svp?
Merci d'avance!

PS: c'est normal si le nom de mes variables "nom_test" et "choix_test" de mon formulaire ne correspondent pas à ceux inscrit dans le JS.

**Bovino** · 29/01/2015, 11h20

j'ai besoin d'incrémenter cette variable nom pour quelle soit différente (avec "nom_test_'+i+'" par exemple).

C'est un besoin que tu t'imposes inutilement car il n'a pas lieu d'être. Seuls les id ont besoin d'être uniques dans la page.

La technique habituelle pour traiter les champs ayant le même nom est d'utiliser une syntaxe de tableau :

Code html :

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

<input name="nom_test[]" type="text"/>

Ainsi, dans ton code PHP, $_POST['nom_test'] sera un tableau classique que tu pourras parcourir à loisir.

**xKryckx** · 29/01/2015, 11h23

Merci pour ta réponse rapide.
Je n'avais pas pensé au tableau (j'ai honte ^^)
Par contre pourrais tu m'expliquer comment adapter mon code JS avec ce tableau stp?

**mathieu** · 29/01/2015, 13h49

c'est plus une question de JavaScript, demande peut-être à un modérateur de déplacer ta discussion

**xKryckx** · 30/01/2015, 14h56

Bonjour à tous, je up la conversation car je suis bloqué sur mon problème JS.

Pour expliquer, j'ai un outil formulaire qui permet à l'utilisateur de créer son formulaire de A à Z en donnant un nom et le type du champ.

Mon problème est que je n'arrive pas à dupliquer le type si il s'agit d'un select ou d'une checkbox ou d'un bouton radio.

Voici mon code avec la fonction JS qui me permet de rajouter des champs:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>sans titre 1</title>
 
<script language="javascript">
<!--
/*function create_champ()
{
var i = parseInt(document.getElementById('nombre').value)
var i = i + 1;
if(i<'4'){
document.getElementById('nombre').value = i;
document.getElementById('zone_dynamique').innerHTML += '<div align="left" id="champ_"'+i+'> Nom du champ '+i+' :<input type="text" name="nom_test_'+i+'"> Choix '+i+' :<select name=" choix_test_'+i+'></select> <input name="suppr" type="button"  onClick="javascript:supprime_champ()" value="Supprimer un champ"></div>';
}
else{
alert('Vous avez atteint le nombre maximum de ligne');
exit();
}
 
}
function supprime_champ(){
	var cpt = parseInt(document.getElementById('nombre').value);
	cpt--;
	var parent = document.getElementById('zone_dynamique');
	var NodeListe = parent.getElementsByTagName("div"); 
 
 
	if( NodeListe.length >= 2 ){
		var Enfant=NodeListe[NodeListe.length-1]
		parent.removeChild(Enfant);
		document.getElementById('nombre').value = cpt
	}		
 
 
}*/
 
 
-->
</script>
 
 
<script>
  function choixChange(){
     var paragraphe = document.getElementById("paragrapheSupplementaire");
     paragraphe.innerHTML=document.getElementById("choix").hidden;
     if (document.getElementById("choix").value == "liste_1" || document.getElementById("choix").value == "bouton_1"){
        paragraphe.innerHTML+="<label>Rentrez les informations:</label>"
        +'<input name=sous_choix type="text">';
        /*+'<select name="orientation" id="orientation">'
        +'<option value="LP">LP</option>'
        +'<option value="master">master</option>'
        +"<option value=\"inge\">Ecole d'ingé</option>"
        +'<option value="boulot">Boulot</option>'
        +'<option value="autre">Autre</option>'
        +'</select>';*/
 
     }
  }
  choixChange();
</script>
 
</head>
 
<body>
 
<form id="test" name="test23" method="post" action="test_traitement23.php">
Nombre de champs : <input name="nombre" id="nombre" type="text" value="1" size="3">
 
 
	<div id="zone_dynamique">
		<div align="left"> Nom du champ: 
			<input name="nom_test" type="text"/>
		Choix : <select name="choix_test" id="choix" onchange='choixChange();'>
			<option value="test_1" selected="selected">Choisir un type</option>
			<option value="champ_texte_1">Champ de texte</option>
	        <option value="zone_email_1">Zone d'adresse e-mail</option>
	        <option value="liste_1">Liste déroulante</option>
	        <option value="bouton_1">Boutons radio</option>
	        <option value="case_1">Cases à cocher</option>
	        <option value="zone_texte_1">Zone de texte</option>
		</select>
		</div>
 
		<div id="paragrapheSupplementaire">
 
        </div>
		<input type="submit" value="envoyer"/>
	</div>	
</form>
 
</body>
 
</html>