Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Récupération de value de select pour traitement Ajax
    Bonjour,

    Je suis plutôt ignorant en JS et AJAX mais j'ai pris soin de consulter cours, livres et autres forum avant de poster mon désespoir ici même

    Pour le contexte : je cherche à récupérer les values de 4 selects d'un même formulaire, alimentés par des bases de données.
    Ces selects servent à filtrer des résultats actualisés en Ajax. Je récupère bien l'intégralité des éléments recherchés à l'ouverture de la page sur une fonction Ajax (getAllProfessionalPieces).

    Sauf que lors du choix d'au moins un des critères de recherche(select), dont certains pourraient être laissés vierges et de la validation par le boutton, je ne parviens à récupérer qu'un seule valeur (la 1ère : placeChoice).
    Donc là, c'est le blocage ... et je perds patience.

    Code pour les Select :
    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
    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
     
    <div class="pieces_form">
        <form id="filter_form" name="filter_form">
     
            <!-- PLACE FILTER -->
            <div id="filter_place">
                <h3>Lieu de représentation :</h3>
                <select id="place_choice" name="place_choice" class="place_list" method="post" >
                        <option value="" selected="selected">Choisissez</option>
                    <?php
                    foreach ($placeDatas as $placeData) : ?>
                        <option value="<?php echo $placeData['id'] ?>"><?php echo $placeData['universe'] ?></option>
                    <?php
                    endforeach;
                    ?>
                    <?php
                        if (!empty($_POST['place_choice']) && (isset($_POST['place_choice'])))
                        {
                            echo '<option value="<?php $placeData["id"] ?>" selected="selected"><?php $placeData["universe"] ?></option>';
                            header("Location:index.php?page=professionnelsSpectacles");
                        }
                    ?>
                </select>
            </div>
     
            <!-- GAUGE OF PERSONS FILTER -->
            <div id="filters_gauge">
                <h3>Nombre de spectateurs :</h3>
                <select id ="gauge_choice" name="gauge_choice" class="gauge_list" method="post" >
                        <option value="" selected="selected">Choisissez</option>
                    <?php
                    foreach ($gaugeDatas as $gaugeData) : ?>
                        <option value="<?php $gaugeData['max_gauge'] ?>"><?php echo $gaugeData['max_gauge'] ?></option>
                    <?php
                    endforeach;
                    ?>
                        <?php
                        if (!empty($_POST['gauge_choice']) && (isset($_POST['gauge_choice'])))
                        {
                            echo '<option value="<?php $gaugeData["max_gauge"] ?>" selected="selected"><?php $gaugeData["max_gauge"] ?></option>';
                            header("Location:index.php?page=professionnelsSpectacles");
                        }
                    ?>
                </select>
            </div>
     
            <!-- DURATION OF PIECE FILTER -->
            <div id="filters_duration">
                <h3>Durée de la pièce :</h3>
                <select id="duration_choice" name="duration_choice" class="duration_list" method="post" >
                    <option value="" selected="selected">Choisissez</option> 
                    <?php
                    foreach ($durationDatas as $durationData) : ?>
                        <option value="<?php $durationData['duration'] ?>"><?php echo $durationData['duration'] ?></option>
                    <?php
                    endforeach;
                    ?>
                    <?php
                        if (!empty($_POST['duration_choice']) && (isset($_POST['duration_choice'])))
                        {
                            echo '<option value="<?php $durationData["duration"] ?>" selected="selected"><?php $durationData["duration"] ?></option>';
                            header("Location:index.php?page=professionnelsSpectacles");
                        }
                    ?>
                </select>
            </div>
     
            <!-- KIND OF PUBLIC OR AUDIENCE FILTER -->
            <div id="filters_audience">
                <h3>Public :</h3>
                <select id="audience_choice" name="audience_choice" class="audience_list" method="post" >
     
     
                    <option value="" selected="selected">Choisissez</option> 
                    <?php 
                    foreach ($audienceDatas as $audienceData) : ?>
                        <option value="<?php $audienceData['audience'].' '.'selectes=selected' ?>"><?php echo $audienceData['audience'] ?></option>
                    <?php
                    endforeach;
                    ?>
                    <?php
                        if (!empty($_POST['audience_choice']) && (isset($_POST['audience_choice'])))
                        {
                            echo '<option value="<?php $audienceData["audience"] ?>" selected="selected"><?php $audienceData["audience"] ?></option>';
                            header("Location:index.php?page=professionnelsSpectacles");
                        }
                    ?>
                </select>
            </div>
     
            <div id="submitajax">
                <button type="button" onClick="getSpecificProfessionalPieces({place_choice:[place_choice], gauge_choice:['gauge_choice'], duration_choice:[duration_choice], audience_choice:[audience_choice]})">Rechercher</button>
            </div>
        </form>
    </div>



    Code JS/Ajax
    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
    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
     
    function getChoices() {
     
        var placeChoice;
        if (document.getElementById("place_choice").value =!"")
        {
            placeChoice = document.getElementById("place_choice").value;
        } else {
            placeChoice = null;
        }
        console.log(placeChoice);
     
        var gaugeChoice;
        if (document.getElementById("gauge_choice").value =!"")
        {
            gaugeChoice  = document.getElementById("gauge_choice").value;
        } else {
            gaugeChoice = null;
        }
        console.log(gaugeChoice);
     
        var durationChoice;
        if (document.getElementById("duration_choice").value =!"")
        {
            durationChoice = document.getElementById("duration_choice").value;
        } else {
            durationChoice = null;
        }
        console.log(durationChoice);
     
        var audienceChoice;
        if (document.getElementById("audience_choice").value =!"")
        {
            audienceChoice = document.getElementById("audience_choice").value;
        } else {
            audienceChoice = null;
        }
        console.log(audienceChoice);
     
     
        if ((placeChoice = !"") || (gaugeChoice = !"") || (durationChoice = !"") || (audienceChoice = !""))
        {
            var choices = 
                "placeChoice=" + encodeURIComponent(placeChoice) +
                "&gaugeChoice=" + encodeURIComponent(gaugeChoice) +
                "&durationChoice=" + encodeURIComponent(durationChoice) +
                "&audienceChoice=" + encodeURIComponent(audienceChoice);
        } else {
            alert ("Merci de choisir des éléments de sélection dans les listes proposées");
            getAllProfessionalPieces;
        }
    }
     
     
    function getSpecificProfessionalPieces() {
        var xhr = new XMLHttpRequest();
        getChoices();
        xhr.onreadystatechange = function () {
            callBack(xhr);
        }
        xhr.open("POST", "../professionelsSpectaclesFiltree.phtml", true);
        xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
        xhr.send(choices);
        xhr.responseType = "text";
    }
     
     
    function callBack(xhr) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            results.innerHTML = xhr.responseText;
        } else if (xhr.readyState == 4 && xhr.status == 404) {
            alert("Une erreur s'est produite. Merci d'actualiser la page.");
        }
    }




    Aussi, si vous aviez un conseil, un commentaire, ou une source d'inspiration que je n'aurait pas encore consultée, je suis preneur !

    Merci d'avance,

    Bonne journée,

  2. #2
    Membre émérite
    Salut,

    Commençons par les erreurs html d'abord :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <select id="place_choice" ... method="post" >

    On ne met pas un attribut method dans un <select>, mais plutôt dans un <form>


    Côté ergonomie :

    1-Les variables var placeChoice,gaugeChoice,durationChoice,audienceChoice,choices sont déclarées dans le contexte de la fonction getChoices() mais elles sont aussi utilisées dans getSpecificProfessionalPieces(). il faut les mettre comme des variables globales.

    2-Le bouton
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <button type="button" onClick="getSpecificProfessionalPieces({place_choice:[place_choice], gauge_choice:['gauge_choice'], duration_choice:[duration_choice], audience_choice:[audience_choice]})">Rechercher</button>
            </div>
        </form>
    </div>
    normalement doit être type="submit", après il faut empêcher la soumission du formulaire.

    3-Au lieu d'ajouter un attribut onclick au bouton, essaies de gérer l'événement submit sur le <form> :

    Soit avec l'attribut onsubmit :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <form id="filter_form" name="filter_form" onsubmit="getSpecificProfessionalPieces();return false;">


    Ou bien avec addEventListener :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    document.getElementById('filter_form').addEventListener('submit', function(e) {
      e.preventDefault(); //empêcher la soumission du formulaire
      getSpecificProfessionalPieces();
    });


    C'est ce que j'ai pu remarquer pour l'instant.

  3. #3
    Membre à l'essai
    Salut,

    Merci pour tes retours. C'est vrai que je n'arrive plus à prendre du recul par rapport à ce que je fais et j'avoue avoir essayé tellement de choses qu'il reste des reliquats de mes réflexions dans ce que tu as pu lire.

    Concernant le html : c'est corrigé. Le 'post' dans le select venait du fait que j'ai tenté de lancer ma fonction initialement sur un onchange positionné dans chacun des select avant de revenir sur une validation par un bouton.

    Concernant mes variables xxxChoice. Merci encore, c'est tellement logique finalement !

    Concernant le bouton : je ne vois pas comment empêcher la soumission du formulaire Oo ! En revanche, je comprends qu'il ne faille pas rafraîchir l'intégralité de la page :-)

    Sinon, je n'ai pas intégrer JQuery :-)


    après correction : HTML :
    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
    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
    <div class="pieces_form">
    <form id="filter_form" name="filter_form" method="post">
     
        <!-- PLACE FILTER -->
        <div id="filter_place">
            <h3>Lieu de représentation :</h3>
            <select id="place_choice" name="place_choice" class="place_list">
            <!--onchange="getSpecificProfessionalPieces(this.value)" -->
                    <option value="" selected="selected">Choisissez</option>
                <?php
                foreach ($placeDatas as $placeData) : ?>
                    <option value="<?php echo $placeData['id'] ?>"><?php echo $placeData['universe'] ?></option>
                <?php
                endforeach;
                ?>
                <?php
                    if (!empty($_POST['place_choice']) && (isset($_POST['place_choice'])))
                    {
                        echo '<option value="<?php $placeData["id"] ?>" selected="selected"><?php $placeData["universe"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
     
        <!-- GAUGE OF PERSONS FILTER -->
        <div id="filters_gauge">
            <h3>Nombre de spectateurs :</h3>
            <select id ="gauge_choice" name="gauge_choice" class="gauge_list">
            <!--onchange="getSpecificProfessionalPieces(this.value)" -->
                    <option value="" selected="selected">Choisissez</option>
                <?php
                foreach ($gaugeDatas as $gaugeData) : ?>
                    <option value="<?php $gaugeData['max_gauge'] ?>"><?php echo $gaugeData['max_gauge'] ?></option>
                <?php
                endforeach;
                ?>
                    <?php
                    if (!empty($_POST['gauge_choice']) && (isset($_POST['gauge_choice'])))
                    {
                        echo '<option value="<?php $gaugeData["max_gauge"] ?>" selected="selected"><?php $gaugeData["max_gauge"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
     
        <!-- DURATION OF PIECE FILTER -->
        <div id="filters_duration">
            <h3>Durée de la pièce :</h3>
            <select id="duration_choice" name="duration_choice" class="duration_list">
            <!--onchange="getSpecificProfessionalPieces(this.value)" -->
                <option value="" selected="selected">Choisissez</option> 
                <?php
                foreach ($durationDatas as $durationData) : ?>
                    <option value="<?php $durationData['duration'] ?>"><?php echo $durationData['duration'] ?></option>
                <?php
                endforeach;
                ?>
                <?php
                    if (!empty($_POST['duration_choice']) && (isset($_POST['duration_choice'])))
                    {
                        echo '<option value="<?php $durationData["duration"] ?>" selected="selected"><?php $durationData["duration"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
     
        <!-- KIND OF PUBLIC OR AUDIENCE FILTER -->
        <div id="filters_audience">
            <h3>Public :</h3>
            <select id="audience_choice" name="audience_choice" class="audience_list">
     
                <!--onchange="getSpecificProfessionalPieces(this.value)" -->
                <option value="" selected="selected">Choisissez</option> 
                <?php 
                foreach ($audienceDatas as $audienceData) : ?>
                    <option value="<?php $audienceData['audience'].' '.'selectes=selected' ?>"><?php echo $audienceData['audience'] ?></option>
                <?php
                endforeach;
                ?>
                <?php
                    if (!empty($_POST['audience_choice']) && (isset($_POST['audience_choice'])))
                    {
                        echo '<option value="<?php $audienceData["audience"] ?>" selected="selected"><?php $audienceData["audience"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
     
        <div id="submitajax">
            <button type="button" onClick="getSpecificProfessionalPieces({place_choice:[place_choice], gauge_choice:['gauge_choice'], duration_choice:[duration_choice], audience_choice:[audience_choice]})">Rechercher</button>
        </div>
    </form>
    </div>


    Après Correction : 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
    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
    var placeChoice;
    var gaugeChoice;
    var durationChoice;
    var audienceChoice;
    var choices;
     
    function getChoices() {
     
        var placeChoice;
        if (document.getElementById("place_choice").value =!"")
        {
            placeChoice = document.getElementById("place_choice").value;
        } else {
            placeChoice = null;
        }
        console.log(placeChoice);
     
        var gaugeChoice;
        if (document.getElementById("gauge_choice").value =!"")
        {
            gaugeChoice  = document.getElementById("gauge_choice").value;
        } else {
            gaugeChoice = null;
        }
        console.log(gaugeChoice);
     
        var durationChoice;
        if (document.getElementById("duration_choice").value =!"")
        {
            durationChoice = document.getElementById("duration_choice").value;
        } else {
            durationChoice = null;
        }
        console.log(durationChoice);
     
        var audienceChoice;
        if (document.getElementById("audience_choice").value =!"")
        {
            audienceChoice = document.getElementById("audience_choice").value;
        } else {
            audienceChoice = null;
        }
        console.log(audienceChoice);
     
        var choices = 
            "placeChoice=" + encodeURIComponent(placeChoice) +
            "&gaugeChoice=" + encodeURIComponent(gaugeChoice) +
            "&durationChoice=" + encodeURIComponent(durationChoice) +
            "&audienceChoice=" + encodeURIComponent(audienceChoice);
    }
     
     
    function getSpecificProfessionalPieces() {
        var xhr = new XMLHttpRequest();
        getChoices();
        xhr.onreadystatechange = function () {
            callBack(xhr);
        }
        xhr.open("POST", "../contes-a-rebours/src/views/professionelsSpectaclesFiltree.phtml", true);
        xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
        xhr.send(choices);
        xhr.responseType = "text";
    }
     
     
    function callBack(xhr) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            results.innerHTML = xhr.responseText;
        } else if (xhr.readyState == 4 && xhr.status == 404) {
            alert("Une erreur s'est produite. Merci d'actualiser la page.");
        }
    }


    Après ces éléments de correction, j'ai maintenant une erreur avec $_POST et l'ouverture de mon fichier de destination xhr.send(choices), choices étant la variable regroupant tous les choix des 4 selects.

    Est-ce dû au fait qu'il y ai ce rafraîchissement de page sur l'action du bouton ? Ou à la concaténation des 4 variables ?

    Merci encore !!

  4. #4
    Membre émérite
    Tu n'as pas correctement corrigé les déclarations des variables, supprimes les var=... de la fonction getChoices(), elles sont déjà déclarées en dessus.

    Citation Envoyé par Gryzly Voir le message
    Concernant le bouton : je ne vois pas comment empêcher la soumission du formulaire
    Regarde mon post en haut, je t'ai ajouté 2 approches concernant la soumission, et n'oublis surtout pas de modifier le type du bouton en submit type="submit" ou même le supprimer au complet, et supprimer l'attribut onClick.

  5. #5
    Membre à l'essai
    Vu ! Merci !!!!

    Effectivement, les variables déclarées 2 fois ce n'est pas terrible !

    J'ai bien regardé ce que tu as ajouté concernant la soumission du formulaire, je pars sur le js avec addEventListener (j'en comprends plus facilement pour l'avoir déjà utilisé) et cela me semble plus propre de le traiter dans le JS.

    J'ai aussi bien pris note de tes remarques et ai changé le type du bouton en submit. Mais tu parles de le supprimer complètement : pourquoi ? Quel serait le déclencheur ? Un onchange sur les select ?

    Après correction, il semble que ce qui pose problème maintenant c'est ma déclaration de 'choices' dans le send. Cela viendrait de ma concaténation ? c'est ce type d'affichage dans la console :
    placeChoice=&gaugeChoice=&durationChoice=&audienceChoice=

    Et forcément un 404 sur le fichier du xhr.open

  6. #6
    Membre émérite
    Citation Envoyé par Gryzly Voir le message
    Mais tu parles de le supprimer complètement : pourquoi ?
    Supprimes seulement le onClick, pas le bouton au complet, parce que c'est l'EventListener que tu as mis en js qui va s'occuper de la soumission.

    Je viens de voir une erreur de syntaxe que je n'ai pas vu au départ, c'est l'opérateur de comparaison != et pas =!, tu ne vois pas des erreurs dans le console du navigateur ?

  7. #7
    Membre à l'essai
    Effectivement !! je ne vois plus rien.

  8. #8
    Membre à l'essai
    Super !! Merci encore !!

    Du coup, pourquoi je ne parviens pas à récupérer les valeurs des selects 2, 3 et 4 alors que le 1er passe très bien. Les valeurs 2, 3 et 4 sont systématiquement 'null'.

    Sur le 1er j'ai un id. Alors que sur les autres je dois récupérer une chaîne de caractères.

    Et coup, ces valeurs, je les traite avec mon php en Get ou en Post ? En Get car elles sont dans l'URL, c'est bien ça (si j'ai bien compris le traitement avec Ajax ?

  9. #9
    Invité
    Invité(e)
    Bonjour,


    c'est toi-même qui définit dans le script JS comment tu vas récupérer les données dans le fichier PHP :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
        xhr.open("POST", "....php", true);

    Donc, ici, avec $_POST.

  10. #10
    Membre émérite
    Je pense savoir pourquoi les 3 variables sont null, eh ben parce que il manque un echo dans les attributs value :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    value="<?php echo $gaugeData['max_gauge']; ?>"
    value="<?php echo $durationData['duration'] ?>"
    value="<?php echo $audienceData['audience'].' '.'selectes=selected' ?>" //ici une faute de frappe selected et pas selectes, et il faut faire sortir l'attribut selected de l'intérieur du value et même le supprimer, parce qu'il ne sert à rien.

  11. #11
    Membre à l'essai


    Facepalm ! Comment perdre du temps et de l’énergie en JS - Saison 1 !!

    Merci Messieurs !!
    Merci Toufik83 ! Vraiment un grand MERCI !!

    Je vais poursuivre ...

    A suivre ...

  12. #12
    Membre émérite
    De rien, on est la pour s'entre-aider.
    Saison 2

  13. #13
    Invité
    Invité(e)
    Bonjour,

    J'ai déplacé la suite dans le forum PHP : https://www.developpez.net/forums/d2...raitement-sql/

  14. #14
    Membre à l'essai
    Euh, en fait, quelques heures de sommeil et un peu de relecture ce matin et c'est résolu : problème de "" et de '' et de `` dans la rédaction de la requête.

    Merci ! Merci !!

    Et bonne journée !!!

###raw>template_hook.ano_emploi###