11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
Je ne sais pas si je mets mon message au bon endrois, si ce n'est pas le cas je m'en excuse.

Je me heurte à un problème depuis un long moment je ne sais plus comment mis prendre.
Je cherche grace au javascript, à l'ajax à récupérer les donners de deux menu déroulant qui sont dans un formulaire pour récupérer un 3 ème résultat en fonction des deux choix précedent.

En faite de le menu deroulant 1 je choisis la gare de mon arrivée,
dans le menu déroulant 2 je choisis la station où je vais,
en fonction des deux id récupérer je selectionne dans ma base de donner le prix correspondant.

Jusque la c'est simple et fesable en php MAIS je dois faire tout sa sens changer de page ni la rafréchir d'ou l'utilité le javascript, l'Ajax.
Je déclanche alors l'évenement lorsque l'on clic sur le menu déroulant 1 ou 2.
J'arrive à récuperer les résultat de chaque menu deroulant mais pas à dire :
"si le menu déroulant1 à été selectionné je garde l'id1 trouver en memoir (id_arriver), puis lorsque je selectionne le menu déroulant2 je récupère l'id2 (id_destination) et je le compare à id_arriver pour resortir le prix.

Je suis pas sur d'avoir su expliquer correctement le problème mais jespère que si. Voici mon code il y a 2 fichier:

test2.php
<html>
    <head>
        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
        <script type='text/javascript'>
     
            function getXhr(){
                                var xhr = null;
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest();
                else if(window.ActiveXObject){ // Internet Explorer
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                   xhr = false;
                }
                                return xhr;
            }
           
            /**
            * Méthode qui sera appelée sur le click du bouton
            */
            function go(){
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('div_prix').innerHTML = leselect;
                    }
                }

                // Ici on va voir comment faire du post
                xhr.open("POST","ajax.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('arriver');
                id_arriver = sel.options[sel.selectedIndex].value;
                xhr.send("id_arriver="+id_arriver);
            }
           
            function go2(){
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('div_prix2').innerHTML = leselect;
                    }
                }

                // Ici on va voir comment faire du post
                xhr.open("POST","ajax.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('destination');
                id_destination = sel.options[sel.selectedIndex].value;
                xhr.send("id_destination="+id_destination);
            }
        </script>
    </head>

    <body>
    <?php

    $conbas=mysql_connect("localhost","root","");
    mysql_select_db("abcis",$conbas);
?>

        <form>
        <fieldset style="width: 500px">
                <table>
                <tr>
          <td>Gare/Aéroport d?arrivée </td>
          <td>
                   
            <select name="arriver" id='arriver' onclick='go()'>
            <option value='0'>---------- Choix de votre arriver -----------------</option>
               <?php
                $res = mysql_query("SELECT nom_arriver, id_arriver FROM arriver");
                        while($row = mysql_fetch_assoc($res)){
                            echo "<option value='".$row["id_arriver"]."'>".$row["nom_arriver"]."</option>";
                        }
            ?>
            </select>          </td>
          </tr>
          </table>
               
                <!--<label>Prix</label>
                <div id='div_prix' style='display:inline'></div>-->
               
               
               
                <table>
                <tr>
          <td>Gare/Aéroport destination </td>
          <td>
                   
            <select name="destination" id='destination' onclick='go2()'>
            <option value='0'>---------- Choix de votre arriver -----------------</option>
               <?php
                $res = mysql_query("SELECT nom_destination, id_destination FROM destination");
                        while($row = mysql_fetch_assoc($res)){
                            echo "<option value='".$row["id_destination"]."'>".$row["nom_destination"]."</option>";
                        }
            ?>
            </select>          </td>
          </tr>
          </table>
               
                <label>Prix</label>
                <div id='div_prix2' style='display:inline'></div>
               
            </fieldset>
        </form>
    </body>
</html>


Ajax.php
<?php
   
    if(isset($_POST["id_arriver"])){
   
        $conbas=mysql_connect("localhost","root","");
        mysql_select_db("abcis",$conbas);
       
        $lien_id_arriver = ($_POST["id_arriver"]);
       
        }
       
           
        else {    if(isset($_POST["id_destination"])||isset($_POST["id_arriver"])){
   
            $conbas=mysql_connect("localhost","root","");
            mysql_select_db("abcis",$conbas);
       
            $lien_id_destination = ($_POST["id_destination"]);
       
            import_request_variables ("g", "lien_");
       
       
       
                    $sql = "SELECT id_prix, recup_id_destination, nom_prix, recup_id_arriver FROM prix WHERE recup_id_destination='$lien_id_destination' AND recup_id_arriver='$lien_id_arriver'";    
                                   
                    $res=mysql_query($sql,$conbas);
                    $num=mysql_num_rows($res);
                    $enr = mysql_fetch_row($res);
                   
                    echo"<input type='text' name='total' size='30'  class='total' value=".$enr[2].">";
                   
                        }
            }
   
?>    


Voila ou j'en suis, j'espère que quelqu'un pourra m'aider car c'est important pour moi et je suis perdu. Merci à tous
Quand tu dis "garder en mémoire", mémoire de quoi : Javascript ou pour le transmettre à PHP ?

Parce que je ne comprends pas ton problème : l'objet selectedIndex t'indique l'indice du select qui est activé.

Tu essaies de suivre cette logique ?
1) sélectionner départ
2) sélectionner arrivée
3) envoyer départ et arrivée à une page via AJAX puis réinjecter le prix dans un autre champ

Quand on bloque, le plus simple reste parfois de mettre à plat ce qu'on a, ce qu'on veut et ce qu'il manque.
Merci, Très bon conseil de tout mettre à plat parce que la j'étais un peu perdu à force. Ce que je souhaite faire c'est exactement se que tu dis, il faut donc que j'envois via ajax qu'à la fin, pas petit bout par petit bout, c'est sur que comme sa c'est plus simple.

Par contre je ne sais pas comment changer l'ajax pour qu'il récupère les deux information (et non pas une seul) et réinjecte le prix.

Es que tu pourrais m'indiquer comment mis prendre?
OK alors le plus simple serait qu'à la fois pour ton <select> de départ et d'arrivée, tu vérifies si une valeur est choisie pour l'autre <select>. Si c'est le cas, tu transmets les 2 valeurs via un appel AJAX qui te retourne un résultat (le prix).

Il suffirait de te créer une fonction ajax_send_prix( depart, arrivee, id_prix ) :
- depart : correspond au <select> de la valeur de départ
- arrivee : idem mais pour l'arrivée
- id_prix : ID (id="id_prix") du champ dans lequel tu veux envoyer le résultat

Comme ça avec un simple <select id="depart" onchange="ajax_send_prix(this, 'arrivee', 'div_prix2')">...</select> le tour est joué. Tu places aussi cette fonction (en adaptant les paramètres) sur l'autre <select>.

Enfin dernier conseil, évite de nommer tes éléments du style div_prix2 : le jour où tu transformeras la balise en <span>, <p> ou je ne sais trop quoi d'autre, tu vas rendre tes nommages caduques.
Mieux vaut attribuer des noms de classes et d'ID par rapport à leur rôle, pas leur nature Smiley cligne
OK, je crois avoir tout comprit, j'espère que sa va marcher, je ne peux pas tester tout de suite mais je testerais dans la journée.

Merci beaucoup pour tes conseils, ils m'ont vraiment été très utile.
Il est possible que je te redemande conseille si je n'arrive pas à faire se que tu m'indique (vu que parfois je ne suis vraiment pas douer Smiley smile )

merci encore
Salut, c'est qu'il me semblait je ne suis pas très douée Smiley ohwell ,
J'ai bien compris se que tu m'as expliqué (enfin je croix) mais je n'arrive pas à construire la fonction.
Voici où j'en suis dans le code :

test2.php

<html>

    <head>

        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>

        <script type='text/javascript'>

     

            function getXhr(){

                                var xhr = null;

                if(window.XMLHttpRequest) // Firefox et autres

                   xhr = new XMLHttpRequest();

                else if(window.ActiveXObject){ // Internet Explorer

                   try {

                            xhr = new ActiveXObject("Msxml2.XMLHTTP");

                        } catch (e) {

                            xhr = new ActiveXObject("Microsoft.XMLHTTP");

                        }

                }

                else { // XMLHttpRequest non supporté par le navigateur

                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

                   xhr = false;

                }

                                return xhr;

            }

           

            /**

            * Méthode qui sera appelée sur le click du bouton

            */

           
			function ajax_send_prix( depart, arriver, id_prix )
			
			{
			var xhr = getXhr();

                // On défini ce qu'on va faire quand on aura la réponse

                xhr.onreadystatechange = function(){

                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(depart>0 && arriver>0)
					{

                       if(xhr.readyState == 4 && xhr.status == 200)
					   {

                           leselect = xhr.responseText;

                           // On se sert de innerHTML pour rajouter les options a la liste

                           document.getElementById('id_prix').innerHTML = leselect;

                        }
					
				    }

                }



                // Ici on va voir comment faire du post

                xhr.open("POST","ajax.php",true);

                // ne pas oublier ça pour le post

                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

                // ne pas oublier de poster les arguments

                // ici, l'id de l'arrivée

                sel = document.getElementById('arriver');

                id_arriver = sel.options[sel.selectedIndex].value;

                xhr.send("id_arriver="+id_arriver);
				
				
				 // ici, l'id de destination
				sel = document.getElementById('destination');

                id_destination = sel.options[sel.selectedIndex].value;

                xhr.send("id_destination="+id_destination);

			
			}
            

        </script>

    </head>



    <body>

    <?php



    $conbas=mysql_connect("localhost","root","");

    mysql_select_db("abcis",$conbas);

?>



        <form>

        <fieldset style="width: 500px">

                <table>

                <tr>

          <td>Gare/Aéroport d'arrivée </td>

          <td>

                   

            
			<select id="depart" onChange="ajax_send_prix(this, 'arriver', 'id_prix')">

            <option value='0'>---------- Choix de votre arriver -----------------</option>

               <?php

                $res = mysql_query("SELECT nom_arriver, id_arriver FROM arriver");

                        while($row = mysql_fetch_assoc($res)){

                            echo "<option value='".$row["id_arriver"]."'>".$row["nom_arriver"]."</option>";

                        }

            ?>

            </select>          </td>

          </tr>

          </table>

               

                <!--<label>Prix</label>

                <div id='div_prix' style='display:inline'></div>-->

               

               

               

                <table>

                <tr>

          <td>Gare/Aéroport destination </td>

          <td>

                   

            <select id="arriver" onChange="ajax_send_prix(this, 'destination', 'id_prix')">

            <option value='0'>---------- Choix de votre arriver -----------------</option>

               <?php

                $res = mysql_query("SELECT nom_destination, id_destination FROM destination");

                        while($row = mysql_fetch_assoc($res)){

                            echo "<option value='".$row["id_destination"]."'>".$row["nom_destination"]."</option>";

                        }

            ?>

            </select>          </td>

          </tr>

          </table>

               

                <label>Prix</label>

                <div id='id_prix' style='display:inline'></div>

               

            </fieldset>

        </form>

    </body>

</html>


ajax.php


<?php

   

    if(isset($_POST["id_arriver"])){

   

        $conbas=mysql_connect("localhost","root","");

        mysql_select_db("abcis",$conbas);

       

        $lien_id_arriver = ($_POST["id_arriver"]);

       

        }

       

           

        else {    if(isset($_POST["id_destination"])||isset($_POST["id_arriver"])){

   

            $conbas=mysql_connect("localhost","root","");

            mysql_select_db("abcis",$conbas);

       

            $lien_id_destination = ($_POST["id_destination"]);

       

            import_request_variables ("g", "lien_");

       

       

       

                    $sql = "SELECT id_prix, recup_id_destination, nom_prix, recup_id_arriver FROM prix WHERE recup_id_destination='$lien_id_destination' AND recup_id_arriver='$lien_id_arriver'";    

                                   

                    $res=mysql_query($sql,$conbas);

                    $num=mysql_num_rows($res);

                    $enr = mysql_fetch_row($res);

                   

                    echo"<input type='text' name='total' size='30'  class='total' value=".$enr[2].">";

                   

                        }

            }

   

?>    


Voila ou j'en suis, je te rend beaucoup de ton temps dsl, si tu pouvais m'aider construire ma fonction... merci