Formulaire dynamique avec gestion en PHP et calcul des champs en javascript
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:
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:
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:
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:
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
