Récupérer données chargées dynamiquement

61393
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je bosse actuellement sur un simulateur en plusieurs étapes, comme une sorte d'entonoir en questions / réponses qui afficheront un résultat final. Pour le système à plusieurs étapes, j'utilise jQuery Wizard mais le code qui me permet de gérer mon affichage final est en JavaScript, j'ai d'ailleurs bénéficié de l'aide d'un utilisateur discord (Coucou Onsouris) pour me mettre largement sur la voie.

Le problème c'est que je charge dynamiquemenet le résultat final et du coup je n'arrive pas à récupérer d'informations en JavaScript sur cette partie chargée dynamiquement.

document.addEventListener("DOMContentLoaded", () => {
    let recap = [];
    let result = {
        typeMachine: null,
        formatImpression: null,
        gammeCouleur: null,
        volumeImpression: null
    };
    let $bottomWizard = document.getElementById('bottom-wizard');
    let $recap = document.createElement('div');
    $recap.id = 'selection';
    $recap.innerHTML = '<h3>Votre sélection</h3></div><a id="details-bt" href=""><div id="selection-details"></div></a>';
    $bottomWizard.append($recap);
    let $detailsBt = document.getElementById('details-bt');
    let $orderDetails = document.getElementById('selection-details');
    let $resultDiv = document.getElementById('result');

    document.getElementById('details-bt').addEventListener('click', (event) => {
        event.preventDefault();
    });

    document.querySelectorAll('input[type=radio]').forEach(input => {
        input.addEventListener('change', () => {
            recap = [];

            document.querySelectorAll('input[type=radio]:checked').forEach(inputChecked => {
                recap.push(inputChecked.dataset.label +' : '+ inputChecked.dataset.realname);
                result[inputChecked.name] = inputChecked.value;
            });

            if (recap.length > 0) {
                $detailsBt.classList.add('show');

                let detailsHTML = '<h4>Récapitulatif</h4>';

                recap.forEach(item => {
                    detailsHTML += '- ' + item + '<br />';
                });

                $orderDetails.innerHTML = detailsHTML;
            } else {
                $detailsBt.classList.remove('show');
                $orderDetails.innerHTML = '';
            }

            if(result.typeMachine != null && result.formatImpression != null && result.gammeCouleur != null && result.volumeImpression != null) {
                finalResult = getPrinters(result);

                let resultHTML = '';

                Object.keys(finalResult).forEach(printers => {
                    resultHTML += '<div class="col-lg-4">';
                    resultHTML += '<div class="item">';
                    resultHTML += '<input data-label="Choix de la machine" data-realname="'+ finalResult[printers].reference +'" id="choixMachine_answers_'+ finalResult[printers].idImprimante +'" type="radio" name="choixMachine" value="'+ finalResult[printers].idImprimante +'" class="required">';
                    resultHTML += '<label for="choixMachine_answers_'+ finalResult[printers].idImprimante +'"><span><figure><img src="images/'+ finalResult[printers].image +'" alt=""></figure></span><strong>'+ finalResult[printers].reference +'</strong>'+ finalResult[printers]['vitesse'] +'</label>';
                    resultHTML += '</div>';
                    resultHTML += '</div>';
                });

                $resultDiv.innerHTML = resultHTML;
            }

        });

    });
});
    <main>
        <div class="container">
            <div id="wizard_container">
                <form name="example-1" id="wrapped" method="POST">
                    <input id="website" name="website" type="text" value="">
                    <!-- Leave for security protection, read docs for details -->
                    <div id="middle-wizard">

                        <div class="step">
                            <div class="question_title">
                                <h3>Plutôt imprimante ou photocopieur ?</h3>
                                <p>Sélectionnez le type de machine que vous souhaitez utiliser.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Type de machine" data-realname="Imprimante" id="typeMachine_answer_1" type="radio" name="typeMachine" value="1" class="required">
                                        <label for="typeMachine_answer_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Imprimante</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Type de machine" data-realname="Photocopieur" id="typeMachine_answer_2" type="radio" name="typeMachine" value="2" class="required">
                                        <label for="typeMachine_answer_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Photocopieur</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step">
                            <div class="question_title">
                                <h3>Quels sont vos formats d'impression ?</h3>
                                <p>Sélectionnez le format d'impression et de numérisation que vous souhaitez utiliser.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Format d'impression" data-realname="A4" id="formatImpression_answer_1" type="radio" name="formatImpression" value="1" class="required">
                                        <label for="formatImpression_answer_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>A4</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Format d'impression" data-realname="A4/A3" id="formatImpression_answer_2" type="radio" name="formatImpression" value="2" class="required">
                                        <label for="formatImpression_answer_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>A4/A3</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step">
                            <div class="question_title">
                                <h3>Gamme N&B ou Gamme Couleur ?</h3>
                                <p>Souhaitez-vous imprimer et photocopier uniquement en N&B ou avoir la possibilité d'imprimer et de faire des copies en couleur ?</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Gamme" data-realname="Couleur" id="gammeCouleur_answer_1" type="radio" name="gammeCouleur" value="1" class="required">
                                        <label for="gammeCouleur_answer_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Couleur</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Gamme" data-realname="N&B" id="gammeCouleur_answer_2" type="radio" name="gammeCouleur" value="2" class="required">
                                        <label for="gammeCouleur_answer_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>Noir&Blanc</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step">
                            <div class="question_title">
                                <h3>Quel est votre volume d'impressions mensuel ?</h3>
                                <p>Afin de déterminer la vitesse du matériel adapté à vos volumes, évaluez la tranche de volume d'impressions / copies mensuels.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Volume d'impressions" data-realname="0 à 500" id="volumeImpression_answers_1" type="radio" name="volumeImpression" value="1" class="required">
                                        <label for="volumeImpression_answers_1"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>0-500</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Volume d'impressions" data-realname="500 à 5000" id="volumeImpression_answers_2" type="radio" name="volumeImpression" value="2" class="required">
                                        <label for="volumeImpression_answers_2"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>500-5000</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="item">
                                        <input data-label="Volume d'impressions" data-realname="Plus de 5000" id="volumeImpression_answers_3" type="radio" name="volumeImpression" value="3" class="required">
                                        <label for="volumeImpression_answers_3"><span><figure><img src="images/200x200.jpg" alt=""></figure></span><strong>> 5000</strong>Postea democritum mnesarchum ne nam, ad vim aperiri tractatos.</label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <div class="step result_wrapper">
                            <div class="question_title">
                                <h3>Voici notre proposition</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                            <div class="row justify-content-center" id="result"></div>
                            <!-- /row-->
                        </div>
                        <!-- /step -->

                        <!-- Last step ============================== -->
                        <div class="submit step" id="end">
                            <div class="question_title">
                                <h3>Merci de renseigner vos coordonnées.</h3>
                                <p>Nous vous contacterons dans les plus brefs délais.</p>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-lg-5">
                                    <div class="box_general">
                                        <div class="form-group">
                                            <input type="text" name="nom" class="required form-control" placeholder="Nom">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="prenom" class="required form-control" placeholder="Prénom">
                                        </div>
                                        <div class="form-group">
                                            <input type="email" name="email" class="required form-control" placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="telephone" class="form-control" placeholder="Téléphone">
                                        </div>
                                    </div>
                                    <!-- /box_general -->
                                </div>
                            </div>
                            <!-- /row -->
                        </div>
                        <!-- /Last step ============================== -->
                    </div>
                    <!-- /middle-wizard -->
                    <div id="bottom-wizard">
                        <div class="float-right clearfix">
                            <button type="button" name="backward" class="backward">Précédent</button>
                            <button type="button" name="forward" class="forward">Suivant</button>
                            <button type="submit" name="process" class="submit">Envoyer</button>
                        </div>
                    </div>
                    <!-- /bottom-wizard -->
                </form>
            </div>
            <!-- /Wizard container -->
        </div>
        <!-- /Container -->
    </main>
    <!-- /main -->

Ce que je veux

La partie dans resultHTML est ce qui est chargé dynamiquement en fonction des choix qui ont été fait.

J'aimerai récupérer les informations du choix qui a été fait afin de le PUSH dans mon tableau recap[]; mais je suis bloqué par le fait que ce ne soit pas chargé dans le DOM je présume.

Si quelqu'un a une idée ?
Merci à vous tous :)

3 Réponse

47855
,

Salut,

Il y a bien trop de code, essaye d'être plus concis stp car là c'est pas vraiment possible de comprendre rapidement ce qui se passe ^^'

61393
,

Salut,

oui je m'en suis bien rendu compte en voyant aucune réponse lol !

J'ai mis une version ONLINE http://simulateur.kthxbye.fr/

En gros là dans mon scénario quand je fais : Imprimante + A4 + Couleur + 0 à 500 et que je sélectionne la proposition puis que je fais précédent, que je sélectionne de 500 à 5000, si je hover le i à côté de "Votre sélection" j'ai bien "Choix de la machine" qui se met
Mais avant ça ça ne s'ajoute pas.

Default
,

je suis d'accord avec vous . il est possible . notre links sont ici

[URL="http://www.npco.net/"]طراحی وب سایت[/URL]
[URL="https://www.limotorsh.com/"]طراحی سایت[/URL]
[URL="http://www.idea-soft.ir/"]طراحی سایت[/URL]
[URL="http://www.kaghazbaz.com/%DA%A9%D8%A7%D8%A8%DB%8C%D9%86%D8%AA-mdf /"] MDF کابینت [/URL]
[URL=" http://www.sitecode.ir/"]طراحی سایت تهران[/URL]
[URL=" http://www.npco.net/web-design-tehran.htm"]طراحی سایت تهران[/URL]
[URL=" http://www.idea-soft.ir/"]طراحی سایت تهران[/URL]