Bonjour à tous

Comme dit dans le titre :

1/ mon formData ne renvoie pas la valeur sélectionnée dans le select_type_tiers[] pourtant considéré comme tableau (la boucle de test renvoie bien les deux champs : le premier est correct mais le select affiche empty string)...,

2/ mon fetch sur la page PHP "ajoutTiers.php" renvoie le formulaire lui-même donc aucune donnée n'est insérée dans la base, pourtant le code php de ladite page marche parfaitement lui.


Merci d'avance pour votre expertise

ajoutTiers.js :

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
const formTiers = document.querySelector('#formTiers')
const formData = new FormData(formTiers)
 
formTiers.addEventListener('submit', async (e) => {
    e.preventDefault()
 
    for (let key of formData.keys()) {
        console.log(key, formData.get(key))
    }
 
    await fetch('/php/functions/ajoutTiers.php', {
            method: "POST",
            mode: 'no-cors',
            headers: {
                "Content-Type": "application/json"
            },
            body: formData
        })
        .then(response => response.ok ? response.json():"Erreur")
        .then(data=>console.log(data))
        .catch((error => {
            console.error(error)
        }))
})
// formTiers.reset()
ajoutTiers.php :

Code php : 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
<?php
require_once('./../formTiers.php');
require_once('./../classes/Db.php');
 
if (isset($_POST['btnAjoutTiers'])) {
 
    $nom_tiers = $_POST['nom_tiers'];
    $type_tiers = $_POST['select_type_tiers'];
 
    if (isset($nom_tiers) && !empty($nom_tiers)) {
        if (strlen($nom_tiers) < 3) {
            echo JSON_encode("Le nom d'un tiers ne peut être inférieur à 3 caractères");
            return false;
        }
        if (isset($type_tiers) && $type_tiers == "") {
            echo JSON_encode("Le type de tiers est obligatoire, veuillez en choisir un dans la liste déroulante.");
            return false;
        }
        //Eviter failles xss et Mise en majuscules
        $nom_tiers = ucfirst(strip_tags($nom_tiers));
        $type_tiers = ucfirst(strip_tags($type_tiers));
        //Ajout en bdd
        ajoutTiers($nom_tiers, $type_tiers);
    }
}
 
function ajoutTiers(string $nom_tiers, String $type_tiers)
{
    try {
 
        DB::connexion();
        $qry = ("INSERT INTO `tiers` (`nom_tiers`,`type_tiers`) VALUES (:nom_tiers,:type_tiers)");
        $stmt = DB::$bdd->prepare($qry);
        $stmt->bindValue(':nom_tiers', $nom_tiers, PDO::PARAM_STR);
        $stmt->bindValue(':type_tiers', $type_tiers, PDO::PARAM_STR);
        $stmt->execute();
        $stmt->closeCursor();
        //Message Ok utilisateur
        echo JSON_encode("Le tiers [" . $nom_tiers . "] a été ajouté avec succès.");
 
    } catch (PDOException $e) {
 
        if ($e->getCode() == 23000) {
            echo JSON_encode("Impossible d'effectuer l'opération : Ce nom et type de tiers existent déjà dans la base.");
        } else {
 
            echo JSON_encode("Une erreur est survenue " . PHP_EOL . $e->getMessage());
        }
    }
}

formTiers.php

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/styles.css">
    <title>Gestion des tiers</title>
</head>
 
<body>
    <?php
    require_once('functions/ajoutTiers.php');
    ?>
    <form action="" method="post" id="formTiers">
        <div class="entete">
            <h4>Créer un tiers / type de tiers</h4>
            <div>
                <label for="nom_tiers">Nom du tiers</label>
                <input type="text" id="nom_tiers" name="nom_tiers" />
            </div>
            <div>
                <label for="select_type_tiers">Type du tiers</label>
                <select name="select_type_tiers[]" id="select_type_tiers">
                    <option value=""> --Sélectionner un type-- </option>
                </select>
            </div>
            <div>
                <button class="button ajouter" type="submit" id="btnAjoutTiers" name="btnAjoutTiers">Créer tiers</button>
            </div>
        </div>
 
        <table id="table_tiers">
            <thead>
                <td colspan="3">Tiers enregistrés :</td>
                <tr>
                    <th>Nom</th>
                    <th>Type</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </form>
    <script src="/js/listeTypesTiers.js" type="text/javascript"></script>
    <script src="/js/listeTiers.js" type="text/javascript"></script>
    <script src="/js/ajoutTiers.js" type="text/javascript"></script>
 
</body>
 
</html>