[Autocomplétion] Simplification du code

**ddaweb** · 05/02/2023, 23h33

Bonjour,

Je fais une modification à notre outil de gestion du club.
Au lieu de faire des choix déroulants pour chaque catégorie, je voudrait passer à 7 champs d'autocomplétion qui peuvent sélectionner tous les articles.
Mon script fonctionne très bien, mais vu la répétition du code, je me demande s'il n'y a pas moyen de simplifier cette partie :

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
<script>
	$(function() {
		$("#article1").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
 
	$(function() {
		$("#article2").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
 
	$(function() {
		$("#article3").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
 
	$(function() {
		$("#article4").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
 
	$(function() {
		$("#article5").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
 
	$(function() {
		$("#article6").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
 
	$(function() {
		$("#article7").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3, });
	});
</script>

La requête MySQL est dans cette page auto_choix_article.php

Les 7 articles sont sous forme d'un formulaire par une boucle et c'est évidemment l'ID qui rempli l'autocomplétion : je pourrais en mettre plus au besoin, la variable $nbr_autocompletion est en début de page

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
<?php
$nbr_autocompletion=7;
for ($z=1;$z<=$nbr_autocompletion;$z ++) {
	$nom_article='article'.$z;
	$paiement_article='paiement'.$z;
	$paiement_article_post='check'.$z;
	$$paiement_article_post='L';
 
	if (isset($_POST[$nom_article]) && $_POST[$nom_article]!='') { $article=$_POST[$nom_article]; }
	else { unset($_POST[$paiement_article]); }
 
	print "<div class=\"div_right_20\">";?>
		<font class="texte_Bleu_11-1">L <input type="radio" name="<?php echo $paiement_article ?>" value="L" <?php if ($_POST[$paiement_article]=='L') { echo 'checked=checked'; } ?> /></font>&nbsp;&nbsp;
		<?php if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') {?>
			<font class="texte_Bleu_11-1">B <input type="radio" name="<?php echo $paiement_article ?>" value="B" <?php if ($_POST[$paiement_article]=='B') { echo 'checked=checked'; } ?> /></font>&nbsp;&nbsp;
		<?php } ?>
		<font class="texte_Bleu_11-1">BC <input type="radio" name="<?php echo $paiement_article ?>" value="BC" <?php if ($_POST[$paiement_article]=='BC') { echo 'checked=checked'; } ?> /></font> <?php
	print "</div>";
 
	print "<div class=\"div_left_15\" align=\"right\">Article $z&nbsp;:&nbsp;</div>";
	print "<input type=\"text\" name=\"$nom_article\" class=\"champ_form\" size=\"72\" id=\"$nom_article\" value=\"$article\" />";
	print "<div class=\"div_space_5\">&nbsp;</div>";
 
	unset($article);
}
print "<div class=\"div_left_25\" align=\"right\">&nbsp;</div>";
print "<div class=\"div_left_70\">";
	print "<br /><span class=\"texte_GrisClair_11-1\">A partir de <strong>3 caractères</strong>, il y a une recherche automatique</span>";
print "</div>";
print "<div class=\"div_space_10\">&nbsp;</div>";
?>

Le formulaire n'est pas encore à 100% terminé : je dois encore faire le premier mode de paiement sur "L" et faire tout en PHP (enlever l'HTML).
En cas d'erreur dans l'envoi, je garde les valeurs envoyées ... rappeler le formulaire efface tout.

Serait-il possible de faire également une boucle comme le formulaire pour le script, avec la même variable de nombre ?

Merci pour votre aide
ddaweb

**Toufik83** · 06/02/2023, 12h48

Bonjour,

Pour le JS, vous pouvez utiliser un seul sélecteur ciblant tous les id de vos éléments :

Code :

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

1
2
3
$(function() {
	$("[id^='article']").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 });
});

Le sélecteur [id^='article'] permet de cibler tous les éléments ayant un id commençant par "article", sinon vous pouvez aussi séparer les id par une virgule :

Code :

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

1
2
$("#article,#article2,#article3,#article4,#article5,#article6,#article7")
.autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 });

Ou bien utiliser seulement leurs classes .champ_form :

Code :

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

$(".champ_form").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 })

Remarque :
Une seule $(function(){/*code js ...*/}) est largement suffisante, dans laquelle vous mettez tous votre code JS.

**ddaweb** · 06/02/2023, 15h28

Merci Toufk83, j'ai opté et testé le code qui me semble le plus ouvert par rapport au formulaire -> test en mettant 10 articles par la variable et c'est OK également :

Code :

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

1
2
3
$(function() {
	$("[id^='article']").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 });
});

Super quand on peut simplifier les choses, cette répétition de code identique me faisait mal

Utile les regex quand on maîtrise, ce qui n'est pas mon cas.

Plus simple que cela est difficile, je vais mettre en résolu.

NB : la classe étant utilisée par d'autres champs, je n'ai pas trouvé cela comme une solution idéale

**ddaweb** · 08/02/2023, 01h18

Mon problème initial est résolu, mais je continue de travailler sur cette même partie.

Ici chaque ligne a un mode de paiement et je souhaite, via du JS, masquer les modes de paiement via des sélections "radio" globales.
Les divisions d'une classe spécifique devraient être masqués si je coche un mode de paiement global et visible si je dis "non".
Dans la grande majorité des cas, nos membre paient tout avec 1 seul mode de paiement

Soyez indulgents avec moi, je n'ai jamais fait de JS

Les "radio" globaux :

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
<?php
print "<hr class=\"hr_form\">";
print "<div class=\"div_space_5\">&nbsp;</div>";
print "<div class=\"div_left_25\" align=\"right\">Paiement global : &nbsp;</div>";
print "<div class=\"div_left_70\">";
	print "&nbsp;&nbsp;<span class=\"texte_Bleu_11-1\">Non <input type=\"radio\" name=\"paiement_global\" id=\"global\" value=\"non\" onchange=\"paiements(this.value)\" /> &nbsp;&nbsp;";
	print "L <input type=\"radio\" name=\"paiement_global\" id=\"global\" value=\"L\" checked=\"checked\" onchange=\"paiements(this.value)\" /> &nbsp;&nbsp;";
	if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') { print "B <input type=\"radio\" name=\"paiement_global\" id=\"global\" value=\"B\" onchange=\"paiements(this.value)\" /> &nbsp;&nbsp;"; }
	print "BC <input type=\"radio\" name=\"paiement_global\" id=\"global\" value=\"BC\" onchange=\"paiements(this.value)\" /></span>";
	print "<span class=\"texte_GrisClair_11-1\">&nbsp;&nbsp;<strong>Non = plusieurs mode de paiement</strong></span>";
print "</div>";
print "<div class=\"div_space_5\">&nbsp;</div>";
print "<hr class=\"hr_form\">";
print "<div class=\"div_space_10\">&nbsp;</div>";
?>

Les divisions d'une boucle que je souhaite masquer ou non (5 lignes, nombre configurable):

Code :

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

1
2
3
4
5
6
7
8
9
<?php
print "<div class=\"div_right_20_paiement\" style=\"display:none;\">";
	print "L <input type=\"radio\" name=\"$paiement_article\" value=\"L\" "; if ($_POST[$paiement_article]=='L') { echo 'checked=checked'; } else if (!$_POST[$paiement_article]) { echo 'checked=checked'; } print " />&nbsp;&nbsp;";
	if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') {
		print "B <input type=\"radio\" name=\"$paiement_article\" value=\"B\" "; if ($_POST[$paiement_article]=='B') { echo 'checked=checked'; } print " />&nbsp;&nbsp;";
	}
	print "BC <input type=\"radio\" name=\"$paiement_article\" value=\"BC\" "; if ($_POST[$paiement_article]=='BC') { echo 'checked=checked'; } print " />";
print "</div>";
?>

Enfin le JS que j'ai essayé et qui ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
<script>
	$(function() { $("[id^='article']").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 }); }); // ---- code du poste initial
 
	function paiements(global) { // ----- Partie qui ne fonctionne pas
		document.getElementByClassName('div_right_20_paiement').style.display='none';
		if (global=="non") { document.getElementByClassName('div_right_20_paiement').style.display='block'; }
	}
</script>

Je suis parti d'un petit exercice que j'ai fait pour essayer le JS à partir d'une exemple très simple : qui fonctionne très bien (peut-être mal écrit

)

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
<strong>Cotisation</strong> : Non &nbsp;<input type="radio" id="cot_choix" name="cot" value="non" onchange="cotisation(this.value)" checked="checked"/> &nbsp;
Cot <input type="radio" id="cot_choix" name="cot" value="cot" onchange="cotisation(this.value)"/> &nbsp;
AiO <input type="radio" id="cot_choix" name="cot" value="aio" onchange="cotisation(this.value)"/>
 
<div id="non" style="display:block;">
	<p><strong>Ass. sportive obligatoire</strong> : &nbsp;<input type="checkbox" name="ass" value="oui"/> &nbsp;3 €</p>
	<strong>Abonnement(s)</strong> : Non &nbsp;<input type="radio" name="abo1" value="0" checked="checked"/> &nbsp;
	10 <input type="radio" name="abo" value="10" /> &nbsp;
	20 <input type="radio" name="abo" value="20"/>
	30 <input type="radio" name="abo" value="30"/>
</div>
 
<div id="cot" style="display:none; text-indent: 50px; padding-top: 10px;">
     Prix : 20 € &nbsp;-&nbsp; 
	<strong>Abonnement(s)</strong> : Non &nbsp;<input type="radio" name="abo" value="0" checked="checked"/> &nbsp;
	10 <input type="radio" name="abo" value="10" /> &nbsp;
	20 <input type="radio" name="abo" value="20"/>
	30 <input type="radio" name="abo" value="30"/>
</div>
 
<div id="aio" style="display:none; text-indent: 50px; padding-top:10px;">
     Prix : 60 € &nbsp;-&nbsp; Chien(s) supplémentaire(s) : 
		<select  name="aio2" /><?php
                        for ($nbr=0; $nbr<=9;$nbr++) { print "<option>$nbr</option>"; }
                ?></select>
		&nbsp; à 30 €
</div>
 
<script>
function cotisation(cot_choix) {
    document.getElementById('non').style.display='none';
        document.getElementById('cot').style.display='none';
        document.getElementById('aio').style.display='none';
        if (cot_choix=="cot") { document.getElementById('cot').style.display='block'; }
        else if (cot_choix=="aio") { document.getElementById('aio').style.display='block'; }
        else { document.getElementById('non').style.display='block'; }
}
</script>

Edit : un petit screen du résultat actuel, il y a encore quelques lacunes dont les alignements et les champs articles vont s'aligner avec les radios au dessus

Nom : paiements.jpg
Affichages : 178
Taille : 35,5 Ko

Nom : paiements.jpg
Affichages : 178
Taille : 35,5 Ko

**Toufik83** · 08/02/2023, 03h55

Bonjour,

C'est un autre problème mais bon ..., on va essayer de le résoudre quand même, mais avant il y'a beaucoup de choses que je ne peux pas ignorer.

Ecrire le code HTML avec la syntaxe HTML quand vous pouvez, est toujours mieux que de l'écrire en PHP
Un attribut id doit être unique dans une page HTML
Lorsqu'on utilise jQuery, il ne faut pas voir ce genre d'attribution d'événement onchange="....", il faudrait plutôt attacher les événements avec la syntaxe jQuery

Premiere suggestion :

Au lieu d'écrire :

Code php :

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

print "<hr class=\"hr_form\">";

, on peut couper le contexte PHP avec ?> et écrire du HTML:

Code :

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

1
2
3
4
5
<?php /*des instructions PHP ....*/ ?>
<hr class="hr_form">
<?php //on peut toujours rouvrir le contexte PHP et continuer ..
//d'autres instructions php .... 
?>

C'est toujours beaucoup mieux de séparer le code HTML du PHP pour une bonne lisibilité de code.

Deuxième suggestion :

Il ne faut jamais attribuer le même id à plusieurs éléments HTML, dans votre cas c'est id=\"global\" et id="cot_choix" attribués aux inputs radio.

Troisième suggestion :

Au lieu de onchange=\"paiements(this.value)\", vous devriez supprimer les attributs onchange et rattacher l'événement change avec la syntaxe jQuery, et surtout le déplacer à l'intérieur de $(function) que vous avez déjà utilisé pour l'auto-complétions :

Code :

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

1
2
3
4
5
6
7
$(function() { 
      $("[id^='article']").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 }); 
 
       //On continue ici, et on peut appeler la fonction paiements sans les parenthèses () à la fin
      $('[name="paiement_global"]').change(paiements);
 
}); // ---- code du poste initial

et écrire le code de la fonction paiements() avec la syntaxe jQuery :

Code :

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

1
2
3
4
function paiements() { 
   if ($(this).val()=="non") $('.div_right_20_paiement').show();
   else $('.div_right_20_paiement').hide();
}

Prévenez moi lorsque vous aurait fait les modifications que je vous ai suggérés pour qu'on continue...

**ddaweb** · 08/02/2023, 23h20

Merci Toufik83

Avant de parler du code, je vais répondre à vos remarques pertinentes :
ID : en effet, une erreur de ma part, je le sais en plus.
Code PHP : notre interface a plus de PHP que d'HTML (essentiellement des requêtes MySQL et donc plusieurs dizaines de variables + comme vous le voyez, beaucoup de conditions suivant les cas de figure), constamment passer en PHP est ce que je faisais au début, mais cela était assez lourd -> je suis donc passé en tout PHP et maintenant c'est un automatisme de mettre \" pour ", un ; en fin de ligne, etc... (je dois d'ailleurs faire attention quand je met du code HTML

) + j'ai modifié les paramètres de NotePad++ en adaptant la couleur des éléments pour une meilleure visibilité.

Je peux ouvrir un nouveau topic si vous préférez.

Côté de votre code :

J'ai du faire quelques petites adaptations afin que la page soit à 100%, dont mettre un style=display:none pour les division à masquer/afficher vu que par défaut c'est L et donc masqué.

Voici le résultat :
Nom : paiements2.jpg
Affichages : 155
Taille : 32,0 Ko

Nom : paiements2.jpg
Affichages : 155
Taille : 32,0 Ko

Le code de cette partie de page :

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
		// =============== NOUVEAU : TEST ===============
		if ($s_prop_actif_id!=14) { 
			print "<hr class=\"hr_form\"><h2 style=\"color: red;\">&nbsp;&nbsp;C'est un test, pour exemple</h2>";
			print "<hr class=\"hr_form\">";
			print "<div class=\"div_space_5\">&nbsp;</div>";
			print "<div class=\"div_left_25\" align=\"right\">Paiement global : &nbsp;</div>";
			print "<div class=\"div_left_70\">";
				print "&nbsp;&nbsp;<span class=\"texte_Bleu_11-1\">Non <input type=\"radio\" name=\"paiement_global\" value=\"non\" /> &nbsp;&nbsp;";
				print "L <input type=\"radio\" name=\"paiement_global\" value=\"L\" checked=\"checked\" /> &nbsp;&nbsp;";
				if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') { print "B <input type=\"radio\" name=\"paiement_global\" value=\"B\" /> &nbsp;&nbsp;"; }
				print "BC <input type=\"radio\" name=\"paiement_global\" value=\"BC\" /></span>";
				print "<span class=\"texte_GrisClair_11-1\">&nbsp;&nbsp;<strong>Non = plusieurs mode de paiement</strong></span>";
			print "</div>";
			print "<div class=\"div_space_5\">&nbsp;</div>";
			print "<hr class=\"hr_form\">";
			print "<div class=\"div_space_10\">&nbsp;</div>";
 
			// -------------------- Assurance sportive
			print "<div class=\"div_right_20_paiement\" style=\"display: none;\" >";
				print "L <input type=\"radio\" name=\"ass_paiement\" value=\"L\" "; if ($cours_jour_article_paiement_post=='L') { echo 'checked=checked'; } print " />&nbsp;&nbsp;";
				if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') {
					print "B <input type=\"radio\" name=\"ass_paiement\" value=\"B\" "; if ($cours_jour_article_paiement_post=='B') { echo 'checked=checked'; } print" />&nbsp;&nbsp;";
				}
				print "BC <input type=\"radio\" name=\"ass_paiement\" value=\"BC\" "; if ($cours_jour_article_paiement_post=='BC') { echo 'checked=checked'; } print " />";
			print "</div>";
 
			print "<div class=\"div_left_25\" align=\"right\">Assurance sportive : &nbsp;</div>";
			print "<div class=\"div_left70\"><input type=\"checkbox\" name=\"ass_sportive\" value=\"oui\" />&nbsp;&nbsp;<span class=\"texte_Rouge_11-1\">En dehors de la cotisation</span></div>";
			print "<div class=\"div_space_10\">&nbsp;</div>";
			// -------------------- Cotisation et abonnement : ne concerne que les membres adhérents
			if ($_SESSION['s_prop_actif_abonnement']<1000) {
				// --------------- Abonnement
				print "<div class=\"div_right_20_paiement\" style=\"display: none;\" >";
					print "L <input type=\"radio\" name=\"abo_paiement\" value=\"L\" "; if ($cours_jour_article_paiement_post=='L') { echo 'checked=checked'; } print " />&nbsp;&nbsp;";
					if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') {
						print "B <input type=\"radio\" name=\"abo_paiement\" value=\"B\" "; if ($cours_jour_article_paiement_post=='B') { echo 'checked=checked'; } print" />&nbsp;&nbsp;";
					}
					print "BC <input type=\"radio\" name=\"abo_paiement\" value=\"BC\" "; if ($cours_jour_article_paiement_post=='BC') { echo 'checked=checked'; } print " />";
				print "</div>";
 
				print "<div class=\"div_left_25\" align=\"right\">Abonnement : &nbsp;</div>";
				print "<div class=\"div_left_50\">";
					print "&nbsp;&nbsp;<span class=\"texte_Bleu_11-1\">Non <input type=\"radio\" name=\"abo\" value=\"non \" checked=\"checked\" />&nbsp;&nbsp;&nbsp;";
					print "10 <input type=\"radio\" name=\"abo\" value=\"abo_10\" />&nbsp;&nbsp;&nbsp;";
					print "20 <input type=\"radio\" name=\"abo\" value=\"abo_20\" /></span>&nbsp;&nbsp;&nbsp;";
					print "30 <input type=\"radio\" name=\"abo\" value=\"abo_30\" />&nbsp;&nbsp;&nbsp;</span>";
				print "</div>";
				print "<div class=\"div_space_10\">&nbsp;</div>";
				// --------------- Cotisation
				print "<div class=\"div_right_20_paiement\" style=\"display: none;\" >";
					print "L <input type=\"radio\" name=\"cot_paiement\" value=\"L\" "; if ($cours_jour_article_paiement_post=='L') { echo 'checked=checked'; } print " />&nbsp;&nbsp;";
					if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') {
						print "B <input type=\"radio\" name=\"cot_paiement\" value=\"B\" "; if ($cours_jour_article_paiement_post=='B') { echo 'checked=checked'; } print" />&nbsp;&nbsp;";
					}
					print "BC <input type=\"radio\" name=\"cot_paiement\" value=\"BC\" "; if ($cours_jour_article_paiement_post=='BC') { echo 'checked=checked'; } print " />";
				print "</div>";
 
				print "<div class=\"div_left_25\" align=\"right\">Cotisation : &nbsp;</div>";
				print "<div class=\"div_left_50\">";
					print "&nbsp;&nbsp;<span class=\"texte_Bleu_11-1\">Non <input type=\"radio\" name=\"cot\" value=\"non \" checked=\"checked\" />&nbsp;&nbsp;&nbsp;";
					print "Cot. <input type=\"radio\" name=\"cot\" value=\"cot\" />&nbsp;&nbsp;&nbsp;";
					print "AiO <input type=\"radio\" name=\"cot\" value=\"aio\" /></span>";
				print "</div>";
				print "<div class=\"div_space_10\">&nbsp;</div>";
			}
 
			function RecherchePrix ($conn,$nom) {
				$prop_prix_recherche=(string) $_SESSION['s_prop_prix_recherche'];   // ----- Prix suivant type de membre
				$query2 = mysqli_query($conn, "SELECT prod_prix_ca, prod_prix_ce, prod_prix_mbr, data_tva_taux 
					FROM 07_stock_produit prod 
						INNER JOIN 07_stock_type type ON prod.id_type_prod=type.id_type 
						INNER JOIN 01_data_tva tva ON prod.id_tva_prod=tva.data_tva_id 
					WHERE type_nom='$nom' ");
				while ($in2=mysqli_fetch_array($query2)) {
					$prix_tvac=sprintf("%01.2f",$in2[$prop_prix_recherche]*(1+($in2['data_tva_taux']/100)));
				}
				return($prix_tvac);
				unset($prix_tvac);
			}
			$cot_prix=RecherchePrix ($conn,'Cotisation');
			$aio_prix=RecherchePrix ($conn,'All_in_One');
			$aio2_prix=RecherchePrix ($conn,'All_in_One_2');
			$cours_prix=RecherchePrix ($conn,'Cours');
			// -------------------- Auto-complétion
			print "<hr class=\"hr_form\">";
			print "<div class=\"div_space_10\">&nbsp;</div>";
			$nbr_autocompletion=5;
 
			for ($z=1;$z<=$nbr_autocompletion;$z ++) {
				$nom_article='article'.$z;
				$paiement_article='paiement'.$z;
 
				if (isset($_POST[$nom_article]) && $_POST[$nom_article]!='') { $article=$_POST[$nom_article]; }
				else { unset($_POST[$paiement_article]); }
 
				print "<div class=\"div_right_20_paiement\" style=\"display: none;\">";
					print "<font class=\"texte_Bleu_11-1\">L <input type=\"radio\" name=\"$paiement_article\" value=\"L\" "; if ($_POST[$paiement_article]=='L') { echo 'checked=checked'; } else if (!$_POST[$paiement_article]) { echo 'checked=checked'; } print " /></font>&nbsp;&nbsp;";
					if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') {
						print "<font class=\"texte_Bleu_11-1\">B <input type=\"radio\" name=\"$paiement_article\" value=\"B\" "; if ($_POST[$paiement_article]=='B') { echo 'checked=checked'; } print " /></font>&nbsp;&nbsp;";
					}
					print "<font class=\"texte_Bleu_11-1\">BC <input type=\"radio\" name=\"$paiement_article\" value=\"BC\" "; if ($_POST[$paiement_article]=='BC') { echo 'checked=checked'; } print " /></font>";
				print "</div>";
 
				print "<div class=\"div_left_25\" align=\"right\">Article $z : &nbsp;</div>";
				print "<div class=\"div_left_50\">";
					print "<input type=\"text\" name=\"$nom_article\" class=\"champ_form\" size=\"60\" id=\"$nom_article\" value=\"$article\" />";
				print "</div>";
				print "<div class=\"div_space_10\">&nbsp;</div>";
 
				unset($article);
			}
			print "<div class=\"div_left_25\" align=\"right\">&nbsp;</div>";
			print "<div class=\"div_left_70\">";
				print "<span class=\"texte_GrisClair_11-1\">A partir de <strong>3 caractères</strong>, il y a une recherche automatique</span>";
			print "</div>";
			print "<div class=\"div_space_10\">&nbsp;</div>";
		}

Le JQuery:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
        $(function() {
                $("[id^='article']").autocomplete({ source: "./pages/cours/autocompletion/auto_choix_article.php", minLength: 3 }); // ----- Autocomplétion articles
                $('[name="paiement_global"]').change(paiements);   // ----- Masquer ou afficher les modes de paiements + fonction paiements()
        });
        
        function paiements() {
           if ($(this).val()=="non") $('.div_right_20_paiement').show();
           else $('.div_right_20_paiement').hide();
        }
</script>

Je dois encore travailler les POST et la récupération des valeurs si le formulaire est avec des erreurs, je me suis essentiellement focalisé sur votre code afin de vous faire un retour rapidement.

Choses que je vais regarder à réaliser :
- Si on coche un abonnement -> afficher le prix pour ce membre
- Si on coche Cot. ou AiO -> afficher le prix pour ce membre
- Si on coche AiO -> ajouter une division avec la notion de AiO2 + afficher le prix (ex. dans mon code de test)

NB : les variables $s_xxxx sont issues de sessions, je suis tout doucement occupé d'appeler la variable session directement, mais refaire depuis 0 toute une interface prend beaucoup de temps, car même les tables seront optimisées au passage

**Toufik83** · 09/02/2023, 03h33

Bonjour,

Envoyé par ddaweb

notre interface a plus de PHP que d'HTML (essentiellement des requêtes MySQL et donc plusieurs dizaines de variables + comme vous le voyez, beaucoup de conditions suivant les cas de figure)....

Ce n'est pas vraiment une raison convaincante pour tout écrire en PHP, parce que vous pouvez à tout moment quitter le contexte PHP et utiliser celui de HTML et vice versa.

Je prends la partie des conditions (à partir de la ligne 2 jusqu'à la ligne 13) de votre code comme exemple :

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
<?php
if ($s_prop_actif_id!=14) { ?> 
	<hr class="hr_form"><h2 style="color: red;"> C'est un test, pour exemple</h2>
	<hr class="hr_form">
	<div class="div_space_5"> </div>
	<div class="div_left_25" align="right">Paiement global : </div>
	<div class="div_left_70">
	        <span class="texte_Bleu_11-1">Non <input type="radio" name="paiement_global" value="non" />
		L <input type="radio" name="paiement_global" value="L" checked="checked" /> 
                <?php
                if ($s_prop_actif_type=='CA' || $s_prop_actif_type=='CE') { ?>
                B <input type="radio" name="paiement_global" value="B" />
                <?php } ?>
	        BC <input type="radio" name="paiement_global" value="BC" /></span>
		<span class="texte_GrisClair_11-1"> <strong>Non = plusieurs mode de paiement</strong></span>
	</div>
        Le HTML restant..... 
<?php }

Vous voyez que j'ai repris le contexte PHP à la ligne 10 pour mettre la condition PHP puis je l'ai coupé pour qu'ensuite utiliser le contexte HTML puis après j'ai réutilisé PHP pour fermer l'accolade } de la condition PHP juste au dessus.

Comme ça vous utilisez un code HTML clair propre et lisible. et vous supprimez les parasites comme les antislashs "\" d'échappement, les points virgules et les &nbsp d'espacement que vous pouvez remplacer par des propriétés CSS comme padding et margin.

**ddaweb** · 10/02/2023, 18h11

Je suis d'accord avec toi, il y a moyen d'optimiser des mises en page avec le CSS (dont les   que j'utilise dans ce code qui a son origine à mes tous débuts en PHP il y a quelques années) : dans la nouvelle interface en développement, je le fais et simplifie beaucoup mes codes

J'aurais un cinquantaine de pages à parcourir et, en plus, les rendre compatible PHP 8.2 min ... je suis toujours en PHP 7.4, le passage à 8.xx n'est pas possible sans quelques adaptations dans mes codes dans pas mal de pages ... ma nouvelle version est testée directement en min. 8.2.1 (j'ai lu le topic à ce sujet ... mais je le savais déjà qu'il fallait monter ma version

).
Je ne vais pas passer mon temps là dessus et attendre la fin de mon développement.

[Autocomplétion] Simplification du code

Langage PHP

Discussions similaires

Partager

Partager