PHP JavaScript DOM

Bonjour,je suis débutante je dois réaliser mon projet uniquement en javascript (sans framework php pareil) j'ai un autre problème et je trouve cela très bizarre je n'arrive pas à inclure l'ingredient que j'ai ajouté dans la page je n'arrive pas à la récupérer avec PHP j'ai une réponse que je trouve bizarre

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
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
<?php
 
    include('views/communs/menu.php');
   
 // ça c'est le code HTML en bas il y a le Dom donc quand je clique sur le bouton ça me rajoute un ingrédient et ça ça marche
 
?>
<section  class="vh-100 bg-image">
  <div class="mask d-flex align-items-center h-100 gradient-custom-3">
    <div class="container h-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col-12 col-md-9 col-lg-7 col-xl-6">
          <div class="card" style="border-radius: 15px;">
            <div class="card-body p-5">
              <h2 class="text-uppercase text-center mb-5">Supprimer les ingrédients de la Recette</h2>
                <form action='controllerAdmin/supprimerOuAjouterIngredientDeLaRecetteEnQuestion/<?=$conservationId?>' method='post' >
                    <?php
 
                        $listeIngredientDeLaRecette=$selectionnerIngredientsDeLaRecette->fetchAll(PDO::FETCH_NUM);
                        foreach($listeIngredientDeLaRecette as $valeur)
                        {   
                            $afficherIngredientDeLaRecette=modelRecupererIngredientDeLaRecetteEnQuestion($valeur[0]);
                            $afficherIngredientDeLaRecette1=$afficherIngredientDeLaRecette->fetchAll(PDO::FETCH_ASSOC);
                            foreach($afficherIngredientDeLaRecette1 as $autre)
                            {
                                echo  "<input type='checkbox' id='ingredientASupprimer'  name='ingredientASupprimer[]' value=$autre[nomIngredients]>";
                                echo" <label for='ingredient'>$autre[nomIngredients]</label>";
                                echo "<br>";
                            }
 
                     
                        }
                        
                        ?>
                        <br>
 
                        <h2 class="text-uppercase text-center mb-5">Ajouter Ingredient de la Recette</h2>
                        <?php
 
                        echo "<div id='ajout'>";
 
                        $resultAfficherTousLesIngredients1 = ModeleAfficherTousLesIngredients();
                        $resultatAffichage=$resultAfficherTousLesIngredients1->fetchAll(PDO::FETCH_ASSOC);
                        foreach($resultatAffichage as $valeur1)
                        {
                            echo  "<input type='checkbox' id='ingredientAAjouter'  name='ingredientAAjouter[]' value=$valeur1[nomIngredients]>";
                            echo" <label for='ingredient'>$valeur1[nomIngredients]</label>";
                            echo "<br>";
                        }
 
                        ?>
                        </div>
 
                        <br>
                        <br>
                        <div  class="form-outline mb-4">
                          <label class="form-label" for="ingredient">Si vous souhaitez ajouter un ingrédient</label>
                          <input type="text" id="ingredient"name="ingredient"value=''  ><button onclick='ajouterIngredient()' type='button'>ok</button>
                        </div>
 
 
 
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-success btn-block btn-lg gradient-custom-4" name="mettreAJourIngredientDeLaRecetteEnQuestion">Mettre à jour</button>
                        </div>
 
 
 
                </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</section>
 
<script>
  function ajouterIngredient()
  {
    var recuperationId=document.getElementById('ajout');
    var creationNouveauInput=document.createElement('input');
    var creationNouveauLabel=document.createElement('label');
    var recupererValeurInput=document.getElementById('ingredient').value;
    var creationNouveauRetourALaLigne=document.createElement('br');
 
    recuperationId.appendChild(creationNouveauInput);
    recuperationId.appendChild(creationNouveauLabel);
    creationNouveauLabel.appendChild(document.createTextNode(recupererValeurInput));
    recuperationId.appendChild(creationNouveauRetourALaLigne);
 
    
 
    creationNouveauInput.type='checkbox';
    creationNouveauInput.id='idIngredientAAjoute';
    creationNouveauInput.name='ingredientAAjoute[]';
 
    creationNouveauLabel.for='ingredient';
  }
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 if(isset($_POST['ingredientAAjoute']))
        {
            $ingredientAMettreDansLaBaseDeDonnee=$_POST['ingredientAAjoute'];
 
 
            foreach($ingredientAMettreDansLaBaseDeDonnee as $valeur)
            {
                echo $valeur;
 
 
 
 
            }
 
        }

je n'ai pas mis ma fonction en entier

et là ça me donne quand je clique par exemple si je rajoute comme ingrédient tomate et que je la sélectionne

je reçois comme réponse quelque chose de très bizarre il y a pas d'erreur mais je reçois ' on'
si quelqu'un peut m'aider ?merci beaucoup

cela vient de la case à cocher. quand la case n'a pas d'attribut "value", la navigateur envoie "on" comme valeur quand la case est cochée.

Merci beaucoup de ton aide ça marche très bien j'ai un peu changé

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
function ajouterIngredient()
  {
    var recuperationId=document.getElementById('ajout');
    var creationNouveauInput=document.createElement('input');
    var creationNouveauLabel=document.createElement('label');
    var recupererValeurInput=document.getElementById('ingredient').value;
    var creationNouveauRetourALaLigne=document.createElement('br');
 
    recuperationId.appendChild(creationNouveauInput);
    recuperationId.appendChild(creationNouveauLabel);
    creationNouveauLabel.appendChild(document.createTextNode(recupererValeurInput));
    recuperationId.appendChild(creationNouveauRetourALaLigne);
 
 
 
    creationNouveauInput.type='checkbox';
    creationNouveauInput.id='idIngredientAAjoute';
    creationNouveauInput.name='ingredientAAjoute[]';
    creationNouveauInput.value=recupererValeurInput;
 
 
 
    creationNouveauLabel.for='idIngredientAAjoute';
  }