formData n'envoie pas la valeur d'un select + fetch sur POST ne renvoie rien

**clickandgo** · 04/12/2022, 14h47

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>

**binarygirl** · 04/12/2022, 16h38

Bonjour,

Si je regarde le code PHP:

Code :

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

if (isset($_POST['btnAjoutTiers'])) {

Le reste du code sera exécuté pour autant qu'un bouton "btnAjoutTiers" soit inclus dans la requête POST.
Je ne crois pas que votre code JS inclut ce bouton dans la requête émise.
Ce n'est probablement pas utile, vous pouvez simplement vérifier qu'une requête POST est reçue, sans forcément chercher la présence d'un champ particulier.

Vous pouvez analyser le contenu des requêtes envoyées et les réponses avec les outils de votre browser...

**NoSmoking** · 05/12/2022, 11h15

Bonjour,
ton code :

Code :

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

const formData = new FormData(formTiers)

la où il est placé, il te permets de récupérer les données de ton formulaire mais avant que celui-ci ne soit rempli, l'envoi est donc « vide ».

Il te faut placer cette récupération dans la fonction de soumission :

Code :

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

1
2
3
4
5
6
7
8
formTiers.addEventListener('submit', async (e) => {
    e.preventDefault()
    // on récupère ici
    const formData = new FormData(formTiers);
    // on affiche si besoin
    for (let key of formData.keys()) {
        console.log(key, formData.get(key))
    }

Nota : le header connu pour les FormData est Content-Type: multipart/form-data, tu n'es pas obligé de le mettre, donc tu peux faire un simple, sans await que tu n'utilise pas :

Code :

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

1
2
3
4
5
6
fetch('/php/functions/ajoutTiers.php', {
    method: 'POST',
    body: FormData(formTiers)
  })
  .then(response => response.ok ? response.json() : "Erreur")
  .then(data=>console.log(data))

**clickandgo** · 05/12/2022, 13h24

Envoyé par binarygirl

Le reste du code sera exécuté pour autant qu'un bouton "btnAjoutTiers" soit inclus dans la requête POST.
Je ne crois pas que votre code JS inclut ce bouton dans la requête émise.
Ce n'est probablement pas utile, vous pouvez simplement vérifier qu'une requête POST est reçue, sans forcément chercher la présence d'un champ particulier.

Bonjour et merci beaucoup pour votre oeil de Lynx ! , j'ai donc retiré la ligne en question qui n'avait effectivement plus lieu d'être...

**clickandgo** · 05/12/2022, 13h30

Merci pour ta réponse bien complète NoSmoking

Créer le formData dans la fonction : Je savais pas ! (je suppose que c'est pour çà que l'on a pas besoin de faire une méthode "send" comme dans d'autres circonstances...)

Génial ! plus ça va plus je me dis que tout çà c'est comme de l'horlogerie Suisse...

Envoyé par NoSmoking

donc tu peux faire un simple, sans await que tu n'utilise pas :

D'accord mais alors dans quel cas utilise t'on await et async ?

**NoSmoking** · 05/12/2022, 19h46

D'accord mais alors dans quel cas utilise t'on await et async ?

c'est souvent une affaire de goût et d'habitude de lecture/écriture que certains disent plus claire !!!

Soit avec la syntaxe des promesses :

Code :

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

1
2
3
4
5
6
7
8
9
10
function submit() {
  fetch('/php/functions/ajoutTiers.php', {
      method: 'POST',
      body: FormData(formTiers)
    })
    .then((response) => response.json())
    .then((result) => {
      console.log(JSON.stringify(result, null, 2));
    })
}

soit deux « appels » await :

Code :

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

1
2
3
4
5
6
7
8
async function submit() {
  const response = await fetch('/php/functions/ajoutTiers.php', {
    method: 'POST',
    body: FormData(formTiers)
  });
  const result = await response.json();
  console.log(JSON.stringify(result, null, 2));
}

c'est donc souvent au choix de chacun

**clickandgo** · 07/12/2022, 00h52

Merci à vous deux

formData n'envoie pas la valeur d'un select + fetch sur POST ne renvoie rien

JavaScript

Discussions similaires

Partager

Partager