Sujet Précédent Sujet Suivant

Problème récup valeur d'un élément en Javascript

Ceragan - Modifié le 12 avril 2023 à 19:25
Ceragan Messages postés 3 Date d'inscription samedi 15 avril 2023 Statut Membre Dernière intervention 2 mai 2023 - 2 mai 2023 à 06:06

Bonjour,
J'ai un problème avec un code tout bête, le problème doit être certainement un conflit quelque part. Dans la console je n'ai pas d'erreur (en rouge). ça fait 2 semaines que je bloque dessus, même chatGPT ne trouve pas, AU SECOURS

Voici mon code:
HTML (avec un peu de php)

<?php require 'update-maintenance.php'?>                    
                            <div class="grille-t-body">
                                <?php foreach($results as $result) : ?>
                                    <div class="maintenance" id="maintenance-<?php echo $result['id2'] ?>">
                                        <input type="text" placeholder="" name="idintervention" class="input-update-maintenance" data-id="<?php echo $result ['id2']?>" style="display: ;" value="<?php echo $result ['id2'] ?>" >
                                        <input type="text" placeholder="" name="typeintervention" class="input-update-maintenance" value="<?php echo $result['type']?>">
                                        <input type="text" placeholder="" name="dateintervention" class="input-update-maintenance" value="<?php echo $result['date']?>">
                                        <input type="text" placeholder="" name="compteurintervention" class="input-update-maintenance" value="<?php echo $result['compteur']?>">
                                        <input type="text" placeholder="" name="intervenant" class="input-update-maintenance" value="<?php echo $result['intervenant']?>">
                                        <input type="text" placeholder="" name="recap" class="input-update-maintenance" value="<?php echo $result['recap']?>">
                                         <span class="material-symbols-outlined" id="maintenance-info-<?php echo $result['id2'] ?>">info</span>
                                    </div>    
                                <?php  endforeach; ?>
                            </div>

<div class="div-checkbox" style="display: none;">
                    <h2 class="h2-checkbox">Liste des tâches effectuées</h2>
                    <h3 class="h3-checkbox">250H</h3>
                        <form method="post" action="infos-maintenance.php">
                            <label class="label-checkbox" for="vidangemoteur">Vidange moteur :</label>
                            <input type="checkbox" name="vidangemoteur" value="1">
                             
                            <label class="label-checkbox" for="filtrehuilemoteur">Filtre huile moteur :</label>
                            <input type="checkbox" name="filtrehuilemoteur" value="1">
                            <br>
                            <label class="label-checkbox" for="filtregasoil1">Préfiltre-gasoil :</label>
                            <input type="checkbox" name="filtregasoil1" value="1">
                            <br>
                            <input type="text" name="maintenanceId" value="">
                            <button class="bouton-checkbox" type="submit" style="">Valider</button>
                            
                        <form>
                                            
                </div>

JAVASCRIPT

var icons = document.querySelectorAll('.material-symbols-outlined');
 for (var i = 0; i < icons.length; i++) {
    icons[i].onclick = function() {
        var id = document.querySelector('input[name="idintervention"]').value;
        var hiddenInput = document.querySelector('input[name="maintenanceId"]');
        hiddenInput.value = id;
    };
  }
  


$(document).ready(function() {
  // Obtenez une référence à l'élément HTML que vous souhaitez écouter pour les clics
  const infoButton = $('.material-symbols-outlined');
  const repairGrid = $('.div-checkbox');
  
  // Envoyer la valeur à infos-maintenance.php via AJAX lorsque l'icône info est cliqué
  infoButton.on('click', function() {
    
    repairGrid.css('display', 'block');
    
    });
    
});

l'input maintenanceID est censé être en hidden mais je l'ai mis en text pour voir s'il récupère une valeur..rien
Quand je clique sur le bouton valider du formulaire, la page infos-maintenance.php possède juste une ligne vardump($_POST), là aussi toujours pas de valeur dans l'input maintenance-id

Pareil dans cet input qui était à la base en display: none; j'ai enlevé le none pour le laisser apparaître j'ai bien les bonnes valeurs dans, qui correspond à ma base de donnée mais je n'arrive pas à récupérer cette valeur et la placer dans l'input name maintenance-id.

Merci à toutes et tous qui prendrons du temps à me lire et/ou à m'aider.

Peace

A voir également:

Pierre giraud php
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Recuperer l'id d'un element javascript ✓ - Forum Javascript / DHTML
Valeur absolue en c ✓ - Forum C++ & C++ .NET
Valeur absolue c# - Forum C# / .NET

1 réponse

Réponse 1 / 1

@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
12 avril 2023 à 19:34

bonjour

cette partie

var icons = document.querySelectorAll('.material-symbols-outlined');
 for (var i = 0; i < icons.length; i++) {
    icons[i].onclick = function() {
        var id = document.querySelector('input[name="idintervention"]').value;
        var hiddenInput = document.querySelector('input[name="maintenanceId"]');
        hiddenInput.value = id;
    };
  }

elle doit normalement etre mise l’intérieur de

$(document).ready

});

parce que comme c'est présenté tu appel un élément de la page qui n'a pas encore été charge la console doit dalleur mettre une erreur dans ce sens

rien ne sert de courir il faut partir a point.
cours Forest cours !

Ceragan Messages postés 3 Date d'inscription samedi 15 avril 2023 Statut Membre Dernière intervention 2 mai 2023
Modifié le 15 avril 2023 à 05:54

Salut @ Karamel, euréka j 'ai maintenant une valeur mais, ouep il y a un mais^^ la valeur reste bloquée à 1 peu importe l'icon cliqué.
Normalement quand je clique sur l'icon de la ligne dont l'input "idmaintenance" possède la valeur 2 (qui vient de ma base de donnée), le click devrait transférer le 2 de idmaintenance à l'input maintenance-id (normalement caché) pour pouvoir l'envoyer avec le formulaire au php.
Mais cette valeur reste toujours bloquée à 1 et je ne vois pas ce qui cloche.

Aurais-tu une idée?

En tout cas merci pour ton temps

PS: j'ai décidé de suivre en parallèle la formation javascript de Pierre Giraud car je ne comprend pas tout ce que je fais avec le javascript. Je connais html/css, php/sql mais pas encore le javascript. En tout cas si tu trouves je veux bien la soluce :p

@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146 > Ceragan Messages postés 3 Date d'inscription samedi 15 avril 2023 Statut Membre Dernière intervention 2 mai 2023
16 avril 2023 à 20:12

et en faisant de cette maniere sa donne quoi

for (var i = 0; i < icons.length; i++) {
    icons[i].onclick = function(evt) {
        var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value;
        var hiddenInput = document.querySelector('input[name="maintenanceId"]');
        hiddenInput.value = id;
    };
  }

Ceragan Messages postés 3 Date d'inscription samedi 15 avril 2023 Statut Membre Dernière intervention 2 mai 2023 > @karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023
Modifié le 17 avril 2023 à 22:11

Toujours pareil :'( maintenanceId reste égal à 1.

Je te donne également tout le javascript que j'ai dans mon fichier, peut être il y a conflit.

window.onload = function() {
  if (location.search.includes('from_update')) {
    let alertBox = document.getElementById('alertBox');
    let alertContent = document.createElement('div');
    alertContent.innerHTML = '<span>Valeurs enregistrées!</span>';
    alertContent.classList.add('custom-alertBox');
    alertBox.appendChild(alertContent);
    alertBox.style.visibility = 'visible';
    
    
    setTimeout(function() {
      alertBox.removeChild(alertContent);
      alertBox.style.display = 'none';
    }, 2000);
  }
}
//conteu onglets animés
    function openTab(evt, tabName) {
                                // Déclaration des variables
                                var i, tabcontent, tablinks;

                                // Cacher tous les contenus d'onglet
                                tabcontent = document.getElementsByClassName("tabcontent");
                                for (i = 0; i < tabcontent.length; i++) {
                                    tabcontent[i].classList.remove("active");
                                }

                                // Désactiver tous les boutons d'onglet
                                tablinks = document.getElementsByClassName("tablinks");
                                for (i = 0; i < tablinks.length; i++) {
                                    tablinks[i].classList.remove("active");
                                }

                                // Afficher le contenu de l'onglet sélectionné
                                document.getElementById(tabName).classList.add("active");

                                // Activer le bouton d'onglet sélectionné
                                evt.currentTarget.classList.add("active");
                            }


function ajouterligne() {
  var form = document.querySelector('.grille-t-body');
  var nouveauBloc = document.createElement('div');
  nouveauBloc.innerHTML = `
   <br><br><br>
   <h3 class="h3-ajout-ligne-maintenance">Nouvelle Entrée :</h3>
   <form method="post" action="maintenance.php" style="display:block;"> 
    <input type="hidden" name="idintervention" class="td-historique-maintenance" >
    <input placeholder="Type d'intervention" type="text" name="typeintervention" class="td-historique-maintenance" required>
    <input placeholder="Date de l'intervention" type="date" name="dateintervention" class="td-historique-maintenance"required>
    <input placeholder="Compteur" type="number" name="compteurintervention" class="td-historique-maintenance"required>
    <input placeholder="Intervenant" type="text" name="intervenant" class="td-historique-maintenance" required>
    <input placeholder="Description" type="text" name="recap" class="td-historique-maintenance" required>
    <button id="bouton-valider-historique-cache" type="submit" style="display: none;" >VALIDER</button>
  </form>  
  `;
  form.appendChild(nouveauBloc);
}


function boutonEnregistrer(){
    // récupération des boutons
    const bouton1 = document.querySelector("#bouton-enregistrer-historique");
    const bouton2 = document.querySelector("#bouton-valider-historique-cache");

    // ajout d'un écouteur d'événements pour le clic sur le bouton1
    bouton1.addEventListener("click", function() {
    // simuler le clic sur le bouton2
      
        setTimeout(() => {
            bouton2.click();
        },0);
    });
}


//Onglets animés
const onglets = document.querySelectorAll('.onglets');
const contenu = document.querySelectorAll('.contenu');
let index = 0;

onglets.forEach(onglet => {
    onglet.addEventListener('click', () => {
        if(onglet.classList.contains('active')){
            return;
        }else{
            onglet.classList.add('active');
        }
        
        index = onglet.getAttribute('data-anim');
        console.log(index);
        
        for (k = 0; k < onglets.length; k++){
            if (onglets[k].getAttribute('data-anim') != index){
                    onglets[k].classList.remove('active');
            }
        }
        
        for(j = 0; j < contenu.length; j++){
            if(contenu[j].getAttribute('data-anim') == index){
                contenu[j].classList.add('activeContenu');
            }else{
                contenu[j].classList.remove('activeContenu');
            }
        }
        
    })
    
})

for (var i = 0; i < icons.length; i++) {
    icons[i].onclick = function(evt) {
        var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value;
        var hiddenInput = document.querySelector('input[name="maintenanceId"]');
        hiddenInput.value = id;
    };
  }
  
  
  // Obtenez une référence à l'élément HTML que vous souhaitez écouter pour les clics
  const infoButton = $('.material-symbols-outlined');
  const repairGrid = $('.div-checkbox');
  
  infoButton.on('click', function() {
    
    repairGrid.css('display', 'block');
    
    });
    
});

    // ajouter un gestionnaire d'événements clic à chaque image
                                var images = document.querySelectorAll('.imglistmat');
                                for (var i = 0; i < images.length; i++) {
                                    images[i].onclick = function() {
                                        var id = this.getAttribute('data-id');
                                        var hiddenInput = document.querySelector('input[name="mat_id"]');
                                        hiddenInput.value = id;
                                        var buttonCaché2 = document.getElementById('button-caché2');
                                        buttonCaché2.click();
                                    };
                                }

c'est plus exactement le même code

cette partie est toujours hors d'une fonction

for (var i = 0; i < icons.length; i++) {
    icons[i].onclick = function(evt) {
        var id = evt.currentTarget.parentNode.querySelector('input[name="idintervention"]').value;
        var hiddenInput = document.querySelector('input[name="maintenanceId"]');
        hiddenInput.value = id;
    };
  }

ce qui veut dire quelle est exécuter avant le chargement complet de la page et du coup elle ne peut recéper une reference aux elements auquelle elle fait reference vu qu'a ce moment ils n'existent pas encore. et aussi "document.querySelector" utilisé tel quel appellera le premier élément de la page correspondant et il sera toujours le meme je me suis posé la question a savoir si c'est ca le probleme

ça y est j'ai trouvé la solution

En cours de formation javascript je me suis dis : ok go essayer, je comprends mieux ce que je fais.
1. Pour une raison que j'ignore encore le code javascript dans un fichier séparé ne fonctionnait tout simplement pas.
J'ai donc replacé les blocs de code JS avant les blocs de code HTML correspondant
2. Je me suis aidé de chatGPT pour ce fameux dernier code qui m'embêtait, celui pour lequel j'ai publié mon premier message. Et du coup voici ce qu'il en est sorti en lui demandant de simplement corriger ma logique d'écriture, c'est à dire récupération avec get, boucle et insertion :

window.addEventListener('load', function() {
var valorinputmaintenanceId = document.getElementById('maintenanceId');
var icons = document.querySelectorAll('[id^="maintenance-info-"]');

               icons.forEach(function(icon) {
                   icon.addEventListener('click', function() {
                       valorinputmaintenanceId.value = icon.id.slice(17); // récupère la sous-chaîne après "maintenance-info-"
                   });
               });
           });

Il m'a placé un load en première ligne que je ne connaissais pas car en vérifiant dans la console, tout était bon sauf le transfert à maintenanceId. Apparemment les codes javascript se chargeraient plus vite que la page HTML, si j'ai bien compris.
En tout cas tout fonctionne, merci pour ton temps et vive Pierre Giraud :p

Votre réponse