Formulaire dynamique avec gestion en PHP et calcul des champs en javascript

**guillaumeIOB** · 29/04/2018, 16h38

Bonjour a tous,

J'ai un formulaire assez degueulasse que j'ai modifié un peu tout le temps depuis 1an; du coup il est assez pourri et je tente de le rendre plus propre mais il y a certaines choses que je ne sais pas faire comme la gestion des valeurs de ma table SQL pour les mettre dans les champs dynamiques, alors j'ai besoin de votre aide s'il vous plait :

Voila ce que fait mon code :
- Il affiche une ligne d'infos d'un joueur
- Il permet de remplir les champs, un onblur envoi donc la valeur dans une fonction javascript (var xhr_object = new XMLHttpRequest(); ) dont le traitement (INSERT ou UPDATE) est réalisé par une page php
- Il retourne une valeur css du champ pour indiquer que la fonction a été OK
- il calcul les ratios en javascript

Quand on rappelle la page les lignes apparaissent pour chaque joueur enregistré dans la base avec les totaux, sans évidemment faire apparaître les lignes vides qui devront s'afficher en cliquant sur +

Maintenant mon code qui fait peur : (J'utilise des DIV et non un tableau (TR) ) pour le responsive)
....

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
 
<?php
........
$rescomp = mysql_query("SELECT * FROM `".$sufftable."competition` where IDjournee='$journee'");
$nbres_comp=mysql_num_rows($rescomp );if ($nbres_comp==0){$modif=mysql_query("INSERT INTO `".$sufftable."competition` (`IDjournee`)VALUES ('$journee')");}
while($clcomp = mysql_fetch_array($rescomp , MYSQL_ASSOC))
{
for ($i = 1; $i <= 20; $i++) 
{
$j = $i + 1;
$journee = 1;
echo '
<div name="divjoueur_'.$i.'" id="divjoueur_'.$i.'" style="'; if ($clcomp['joueur']=="" and $i>1){echo 'display:none';}echo '"> // je sais bien que ça c'est pourri, toutes mes excuses
    <div><input type="file" name="joueur_'.$i.'" id="joueur_'.$i.'" onblur="envoi_joueur(\'joueur_'.$i.'\','.$journee.','.$i.')" value="$clcomp['joueur']"/></div>
    <div><input type="text" name="match_'.$i.'" id="match_'.$i.'" onblur="envoi_joueur(\'match_'.$i.'\','.$journee.','.$i.')" value="$clcomp['match']"/></div>
    <div><input type="text" name="tournoi_'.$i.'" id="tournoi_'.$i.'" onblur="envoi_joueur(\'tournoi_'.$i.'\','.$journee.','.$i.')" value="$clcomp['tournoi']"/></div>
    <div><input type="text" name="sexe_'.$i.'" id="sexe_'.$i.'" onblur="envoi_joueur(\'sexe_'.$i.'\','.$journee.','.$i.')" value="$clcomp['sexe']"/></div>
    <div><input type="text" name="points_'.$i.'" id="points_'.$i.'" onblur="envoi_joueur(\'points_'.$i.'\','.$journee.','.$i.')" value="$clcomp['points']"/></div>
    <div><input type="checkbox"  name="qualifie_'.$i.'"  id="qualifie_'.$i.'" onblur="envoi_joueur(\'qualifie_'.$i.'\','.$journee.','.$i.')"'; if ($clcomp['qualifie']=="1"){echo " checked='checked'";} echo '> Qualifié(e)</div>
    <div><span style="float:right;"><a href="javascript:;" onclick="envoi_joueur(\'joueur_'.$i.'\','.$journee.','.$i.');document.getElementById(\'divjoueur_'.$j.'\').style.display = \'block\'"><b>+</b></a>'; if ($i>1){echo '<a href="javascript:;" onclick="envoi_joueur(\'supp_'.$i.'\','.$journée.','.$i.');"><i class="fa fa-trash-o" style="color:red"></i></a>';}echo '</span></div>
</div>';
}
}

Ce code implique l'enregistrement préalable de 20 lignes dans ma BDD ce qui est embêtant et lourd, surtout quand in fine j'aurai 365 journées * 20 lignes * X championnats dans ma BDD

mon code javascript :

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
function envoi_joueur (idA,journee,nb) {
idC = document.getElementById(idA).value;
if (typeof idC === 'undefined' || idC === null) {idC=0;}
var xhr_object = new XMLHttpRequest();
xhr_object.open("POST", "sauve_joueur.php?journee="+journee+"&nb="+nb+"&champ="+idA+"&"+idA+"="+idC, true);
xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {}}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "journee="+journee+"&nb="+nb+"&champ="+idA+"&"+idA+"="+idC;
xhr_object.send(data);
idC = document.getElementById(idA).value;
if (typeof idC != 'undefined') {var idC = document.getElementById(idA); idC.style.border="2px solid #00FF00";}
 
 CalculM1(journee)
}
 
function CalculM1(idA) 
{
 point_1=parseInt(document.getElementById("points_1").value); 
 point_2=parseInt(document.getElementById("points_2").value);
 point_3=parseInt(document.getElementById("points_3").value);
 point_4=parseInt(document.getElementById("points_4").value);
//.....
//.....
 point_20=parseInt(document.getElementById("points_20").value);
 
totpoint = point_1 + point_ 2 + ........................... + point_20;
}

mon code PHP

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
 
$journee=@$_GET["journee"]; 
$nb=@$_GET["nb"]; 
$champ=@$_GET["champ"];	
$valeur=@$_GET[$champ];
 
$champ = substr(@$_GET["champ"], 0, strrpos(@$_GET["champ"], '_'));
$nbj = substr(@$_GET["champ"], -1);
$v_var="`$champ` = '$valeur'";
 
 
if ($champ<>"supp"){
	$res = mysql_query("SELECT * FROM `".$sufftable."competition` where `IDjournee`='$journee' and `nbJ`='$nbj '");
	$nbres=mysql_num_rows($res);
	if ($nbres==0){$modif=mysql_query("INSERT INTO `".$sufftable."competition` (IDjournee, nbJ) VALUES ('$journee', '$nbj ')");}
	else
	{
		while($cl= mysql_fetch_array($res, MYSQL_ASSOC))
		{
		$modif=mysql_query("UPDATE `".$sufftable."competition` SET $v_var WHERE `IDjournee`='$journee' and `nbJ`='$nbj '");
		}
	}
}
else 
{
//suppression de la ligne
}
?>

Alors ce code est pourri mais il me permet d’additionner en javascript des champs qui existent bien point_1 à point_20 et surtout un bon traitement de l'info PHP

OR j'aimerai simplifier mon code sur une base aussi simple que celle-ci :

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
<script type="application/javascript">
document.querySelector('#add').addEventListener('click', function(event) {
var first = document.querySelector('table tbody tr:first-child');
first.parentNode.appendChild(first.cloneNode(true));
});
</script>
<table>
<tbody>
<tr>
    <td><input type="file" name="joueur[]" /></td>
    <td><input type="text" name="match []" placeholder="Titre photo"/></td>
    <td><input type="text" name="tournoi[]" placeholder="Description"/></td>
    <td><input type="text" name="sexe[]" placeholder="Sexe"/></td>
    <td><input type="text" name="point[]" placeholder="Point"/></td>
    <td><input type="checkbox"  name="qualifie[]"  id="qualifie[]"> Qualifié(e)</td>
    <td><button id="add">Ajouter ligne</button></td>
</tr>
  </tbody>
</table>

OR mes deux problemes sont :
- Que les champs qui n'existeront pas, car les lignes ne seraient pas créées, causeront des bugs javascript
- et pour le PHP je ne sais pas comment je peux rappeler et placer les bonnes valeurs dans les bons champs [] quand je rafraichie la page.

Merci pour toute votre aide.
Guillaume

**Dendrite** · 29/04/2018, 17h40

Et ta base ? Tu es content de la façon dont elle est conçue ? Comment est-elle conçue ?

**guillaumeIOB** · 29/04/2018, 17h54

Je ne suis content de rien, car il faut toujours apprendre mais ma base est simple :

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
CREATE TABLE `extratest_competition` (
  `idCP` int(11) NOT NULL,
  `IDjournee` int(11) NOT NULL DEFAULT '0',
  `nbj` int(2) NOT NULL,
  `joueur` varchar(255) CHARACTER SET latin1 NOT NULL,
  `match` int(11) CHARACTER SET latin1 NOT NULL,
  `tournoi` int(11) CHARACTER SET latin1 NOT NULL,
  `sexe` varchar(10) CHARACTER SET latin1 NOT NULL,
  `points` int(11) CHARACTER SET latin1 NOT NULL,
  `qualifie` int(1) NOT NULL,
  `supp` int(1) NOT NULL,
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
 
ALTER TABLE `extratest_competition`  ADD PRIMARY KEY (`idCP`),  ADD KEY `idCRED` (`idCP`);
ALTER TABLE `extratest_competition` MODIFY `idCP` int(11) NOT NULL AUTO_INCREMENT;COMMIT;

**Dendrite** · 29/04/2018, 18h01

Et donne moi deux trois enregistrements que je me rende compte s'il te plaît. C'est quoi, du tennis ? Pourquoi id journée ? Pourquoi pas direct un champ date ? Pourquoi nbj ?

**guillaumeIOB** · 29/04/2018, 18h18

idCP est une variable incrémentée qui me servira par la suite..

on peut imaginer du Tennis, du Foot ou n'importe quel sport,

Le but est d'organiser plusieurs tournois presque tous les jours, donc il me faut une IDjournée

nbJ doit correspondre a l'ID de la ligne du joueur

c'est pourquoi dans mon actuel script j'ai nomduchamp_nbj ou nbj correspond a la ligne

aprés le reste ce sont des données simples, donc on peut imaginer :

Imaginons la journée N°1

idCP | IDjournee | nbj | joueur | match | tournoi | sexe | points | qualifie | supp
1---------1----------1-----Jean-------1---------1-------M------100-----1------0
2---------1----------2-----Jean-------2---------1-------M------100-----1------0
3---------1----------3-----Jean-------5---------1-------M------50------1------0
4---------1----------1-----Eric--------1---------1-------M------100-----1------0
5---------1----------2-----Eric--------2---------1-------M------20------0------0
6---------1----------3-----Eric--------4---------1-------M------100-----1------1
7---------1----------1-----Julie-------1---------1-------F ------100-----1------0
8---------1----------2-----Julie-------2---------1-------F ------100-----1------0
9---------1----------3-----Julie-------3---------1-------F------100-----1------0
10-------1----------1-----Julie-------7---------2-------F------250------1------ 0
11-------1----------2-----Julie-------8---------2-------F------100----- 1------0
12-------1----------3-----Julie-------9---------2-------F------100-----1 ------0

Ensuite je dois compter les points selon les qualifiés par journée qui n'ont pas été supprimés

Merci de ton aide

Guillaume

**Dendrite** · 29/04/2018, 19h03

OK Guillaume, donc j'ai bien fait de demander.

Par convention en SQL, tous les champs sont en minuscules, donc cp_id

on peut imaginer du Tennis, du Foot ou n'importe quel sport,

Oui, bien sûr, mais on ne modélisera pas pareil selon que c'est du tennis, du foot ou du hockey sur glace justement !

Pars sur un machin PRATIQUE très concret... sinon rien ne fonctionnera quand tu passeras à un degré d'abstraction supérieur.
Tu veux partir sur des matches éliminatoires ie Roland Garros ? des championnats avec des pools et des points à chaque tour ?
Partons sur un truc genre Roland Garros.

Le but est d'organiser plusieurs tournois presque tous les jours, donc il me faut une IDjournée

Pourquoi donc ? Ca c'est ton préjugé.
Si tu as une table joueur (id, nom, prenom, naissance, sexe)
1 DUPONT Jean 2000-01-01 M
2 MARTIN Julie 2001-03-02 F
3 FREMONT Eric 1998-03-07 M
4 CHUAN Bing 1999-12-07 F

Puis une table match(id, joueur_1, joueur_2, quand, qui_gagne)
1 1 3 2018-04-25 1
2 2 4 2018-04-25 4

Tu pourras ensuite faire une vue v_match super lisible sans redondance d'information qui aura ce SQL pour tes lectures de données

Tu construis ta vue une seule fois :

Code SQL :

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
CREATE OR REPLACE VIEW v_match as 
SELECT m.id as match_id,
m.quand as match_quand,
date_format(m.quand, "%d/%m/%Y") as match_quand_fr,
if(m.qui_gagne=j1.id,"GAGNANT","PERDANT") as j1_statut, 
j1.id as j1_id,
j1.nom as j1_nom, 
j1.prenom as j1_prenom,
j1.sexe as j1_sexe, 
DATE_FORMAT(FROM_DAYS(DATEDIFF(NOW(), j1.naissance)), "%Y")+0 AS j1_age, 
if(m.qui_gagne=j2.id,"GAGNANT","PERDANT") as j2_statut, 
j2.id as j2_id,
j2.nom as j2_nom, 
j2.prenom as j2_prenom,
j2.sexe as j2_sexe, 
DATE_FORMAT(FROM_DAYS(DATEDIFF(NOW(), j2.naissance)), "%Y")+0 AS j2_age
from match m
inner join joueur j1 on m.joueur_1=j1.id
inner join joueur j2 on m.joueur_2=j2.id;

Après, tu te contentes d'un

Code SQL :

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

SELECT * from v_match order by match_quand desc;

Et tu organises une vue tournoi à partir de ça selon le même esprit logique.

Si (comme tout le monde) tu ne te fies qu'à ton bon sens pour faire des bases de données, ça va être très vite... un sacré bazar très mal rangé !
En gros avec ce que je te propose : tu ranges tes tables comme une machine pour que tout reste bien propre et sans redondance, tu utilises les vues pour accéder aux données comme un humain (qui jouait contre qui à telle date ? qui a gagné, qui a perdu ? Rappel de tous les détails)...

**guillaumeIOB** · 29/04/2018, 19h14

Merci beaucoup de ton aide précieuse Dendrite, mais ce n'est pas du tout ce que je recherche.

Mon pb se situe au niveau de l'ajout d'une ligne de code en javascript et son traitement en PHP, notamment le rappel des valeurs.

Il n'y a par exemple aucune notion de date, donc aucun traitement PHP sur base de date.

Mais c'est super sympa d'avoir tenté de m'aider.

Guillaume

**guillaumeIOB** · 29/04/2018, 19h24

Imaginons une projection de ce que je veux dans un autre domaine, les crédits :

Imaginons que j'ai besoin dans la fiche client N° 12 d'inserer des crédits, et qu'une checkbox me permette d'indiquer ceux que je rachete ou pas, ce qui me permettra de calculer la somme plus tard.

Ca va nous donner :

idCRED nbcred idCLIENT NOMCREDIT MONTANT ARACHETER
1-----------1-------12---------Cofidis--------10K--------1(oui)--
2-----------2-------12---------Sofinco-------20K--------1(oui)--
3-----------3-------12---------Cetelem------30K--------0(oui)--
4-----------4-------12---------Immo--------40K--------0(oui)--
5-----------5-------12---------Conco--------50K--------1(oui)--
6-----------6-------12---------Cofinoga------60K--------1(oui)--
7-----------1-------2---------LCL-----------70K--------1(oui)--
8-----------2-------2---------SG------------80K--------1(oui)--
9-----------3-------2---------BNP-----------90K--------1(oui)--
10---------4-------2---------Cofidis--------100K--------1(oui)--

Donc mon problème est la création de ligne supplémentaire, la sauvegarde de ces informations, le rappel des informations pour le client 1 uniquement et le calcul du solde pour les crédits a racheter uniquement toujours pour le client 12

Merci beaucoup

Formulaire dynamique avec gestion en PHP et calcul des champs en javascript

Langage PHP

Discussions similaires

Partager

Partager