Onvalue change liste deroulant

Résolu
jaljad -  
Bonjour,

J'essaie de contrôler 2 listes déroulante ) à partir d'une 3ème... Je m'explique:

J'ai un formulaire en HTML (site web pour un hotel)dans celui là j'ai 3 listes déroulantes:
La première défini le nombre de chambres à réserver "num_room"
La deuxième détermine le type des chambre "room_type"
La troisième defini le type de lit "bed_type"... Jusque là tout va bien...

Je vourdrais "inserser" de nouvelles liste déroulante de type "roomtype" et "bed_type" à partir de la valeur de "num_room"... En d'autes termes:

Si je choisis de reserver 3 chambres, je voudrais que la page affiche directement:

Room 1 : room_type bed_type
Room 2 : room_type bed_type
Room 3: room_type bed_type

Est-ce que quelqu'un pourrait m'aider svp?

Merci :)

8 réponses

  1. jaljad Auteur
    Au fait, voici le code:

    HTML:

    <select name="num_rooms" id="num_rooms" onChange="number(this.form)">
    <option value="1">1</option>
    <option>2</option>
    ...
    </select>

    <div id="dupli">
    <tr><td><div><b>   Room Type</b></td><td>
    <select name="Room_Type" tabindex="10">
    <option value="Standard room">Standard room </option>
    <option value="Junior Suite">Junior Suite</option>
    <option value="Junior Suite with Jacuzzi">Junior Suite with Jacuzzi</option>
    <option value="Grand Suite">Grand Suite</option>
    </select>
    </div></td>
    <td></td><td><div><b>Bed Type</b></td><td>
    <select name="bed_type" tabindex="10">
    <option value="Large Bed">Large Bed</option>
    <option value="Twin Bed">Twin Bed</option>
    </select> </td> </div>

    Et j'ai essayé cela en javascript mais ça ne marche pas:

    function number ()
    {
    var num_rooms = document.getElementAtName("num_rooms").value;
    var final_html = "";

    for( i=0; i<num_rooms; i++)
    {
    final_html+="<input name=\"Room" + i + "\" type=final_html+="<input name=\"Room" + i + "\" type=<tr><td><div><b>   Room Type</b></td><td>
    <select name=\"Room_Type\" tabindex=\"10\">
    <option value=\"Standard room\">Standard room </option>
    <option value=\"Junior Suite\">Junior Suite</option>
    <option value=\"Junior Suite with Jacuzzi\">Junior Suite with Jacuzzi</option>
    <option value=\"Grand Suite\">Grand Suite</option>
    </select>
    </div></td>
    <td></td><td><div><b>Bed Type</b></td><td>
    <select name=\"bed_type\" tabindex=\"10\">
    <option value=\"Large Bed\">Large Bed</option>
    <option value=\"Twin Bed\">Twin Bed</option>
    </select> </td>
    </div>
    </tr>;
    }
    document.getElementAtName("dupli").innerHTML=final_html;
    }

    :)
    0
    1. Fallentree
      Dans un formulaire je presume ?
      0
      1. jaljad Auteur
        Oui, c'est un formulaire
        0
        3. Fallentree
          tu peux aussi faire des div et changer le innerhtml mais pour rajouter un element a un form il faut trouver le bon exemple. ou encore rendre visible des listes au bon moment.
          Il me semble avoir deja lu lajout de nouvelles variables au formulaire.
          0
          1. jaljad Auteur
            Merci pour le lien je suis en train de le lire... Sinon, je n'ai pas très bien compris ton conseil...
            0
            1. Fallentree
              http://www.editeurjavascript.com/scripts/scripts_formulaires_3_653.php

              Y a tout sauf la ligne <form ...>
              0
              1. jaljad Auteur
                Salut,

                Voici j'ai essayer ce code en JS... Mais ca n'a aucun effet :s:

                function number(elmt, value)

                {
                var num_rooms = document.getElementAtName("num_rooms").value;
                var final_html = "";

                for( i=0; i<num_rooms; i++)
                {
                final_html+="<input name=\"Room" + i + "\" type=final_html+=<input name=\"Room\" + i + "\" type=Room Type<select name=\"Room_Type\" tabindex=\"10\"><option value=\"Standard room\">Standard room </option><option value=\"Junior Suite\">Junior Suite</option><option value=\"Junior Suite with Jacuzzi\">Junior Suite with Jacuzzi</option><option value=\"Grand Suite\">Grand Suite</option></select>;"

                }
                document.getElementAtName("Room_Type").innerHTML=final_html;
                }
                0
                1. jaljad Auteur
                  Voici la solution à mon problème

                  function generateForm()
                  {
                  var num_rooms = document.getElementById('num_rooms').value;
                  var final_html = "";

                  alert( "Nombre de rooms: " + num_rooms );

                  for( i=1; i<num_rooms; i++)
                  {
                  final_html += "<div style=\"margin-left:1px; margin-top:5px\"><tr><td><b> Room "+ (i+1) +" Type</b>       </td><td> <select name=\"Room_Type\" id=typeroom tabindex=\"10\"><option value=\"Standard room\">Standard room </option><option value=\"Junior Suite\">Junior Suite</option><option value=\"Junior Suite with Jacuzzi\">Junior Suite with Jacuzzi</option></select></td></tr></div>";
                  }

                  document.getElementById( "dupli" ).innerHTML = final_html;
                  }

                  HTML:
                  <select name="num_rooms" id="num_rooms" onChange="javascript:generateForm();">

                  Par contre, là je rencontre un 2ème problème... En fait, j'ai fichier envoi.php qui m'envoi le formulaire de reservation par... Mais, il ne m'envoit que la valeur de la première chambre "room_type"... Comment je peux faire pour qu'il m'envoit les informations sur toutes les chambres...

                  Voici mon code:

                  <?php
                  //il vous suffit de mettre votre adresse email a la ligne 35

                  //On récupère les valeurs du formulaire
                  $sex = $_POST['sex'];
                  $First_Name = $_POST['First_Name'];
                  $Last_Name = $_POST['Last_Name'];
                  $adress = $_POST['adress'];
                  $state = $_POST['state'];
                  $zip = $_POST['zip'];
                  $country = $_POST['country'];
                  $tel = $_POST['tel'];
                  $email = $_POST['email'];
                  $num_adults = $_POST['num_adults'];
                  $num_children = $_POST['num_children'];
                  $jour = $_POST['jour'];
                  $mois = $_POST['mois'];
                  $year = $_POST['year'];
                  $nights = $_POST['nights'];
                  $num_rooms = $_POST['num_rooms'];
                  $Room_Type = $_POST['Room_Type'];
                  $bed_type = $_POST['bed_type'];
                  $pickup = $_POST['pickup'];
                  $arrive_time_h = $_POST['arrive_time_h'];
                  $arrive_time_m = $_POST['arrive_time_m'];
                  $credit_card = $_POST['credit_card'];
                  $Full_name = $_POST['Full_name'];
                  $card_number = $_POST['card_number'];
                  $ccv = $_POST['ccv'];
                  $exp_month = $_POST['exp_month'];
                  $exp_year = $_POST['exp_year'];

                  ?>
                  <?php //On créée le message email

                  $msg = "Title: $sex
                  First Name: $First_Name
                  Last Name; $Last_Name
                  Adress: $adress
                  State: $state
                  Zip / Postal Code: $zip
                  Country: $country
                  Phone Number: $tel
                  E-Mail: $email
                  Number of Adults: $num_adults
                  Number of Children: $num_children
                  Check-in Date: $jour $mois $year
                  Number of nights: $nights
                  Number of rooms: $num_rooms
                  Room Type: $Room_Type
                  Bed Type: $bed_type
                  Airport pickup: $pickup
                  Arrival Time: $arrive_time_h $arrive_time_m
                  Credit Card Type: $credit_card
                  Card Holder Name: $Full_name
                  Credit Card Number: $card_number
                  CCV: $ccv
                  Expiry Date: $exp_month $exp_year";

                  $recipient = "xxx@xxx.com"; //On met l'adresse email ou on veut recevoire le mail
                  $subject = "Guest Reservation"; //On met le sujet du mail

                  $mailheaders = "From:xxx@xxx.com \n"; //depuis où il a été posté

                  mail($recipient, $subject, $msg, $mailheaders); // message confirmation que le mail a bien été envoyé

                  echo "<HTML><HEAD><link href=\"style.css\" rel=\"stylesheet\" type=\"text/css\">";
                  echo "<TITLE>xxx - Reservation Confirmation</TITLE></HEAD><BODY>";
                  echo "<H1 align=center class=a_broun_b><font size=6>Thank you $sex $First_Name $Last_Name </H1>";
                  echo "<p align=center>";
                  echo "<align=center class=a_broun_b><font size=4>Your reservation has been sent! You will soon receive an e-mail confirmation.<br><br>
                  <a href=\"index.php\"class=gold ><font size=4>Back to Home Page</font></a>";
                  echo "</BODY></HTML>";

                  ?>
                  0

              Discussions similaires

              Toutes les combinaisons à 4 chiffres de 0000 a 9999
              Sarah

              11 réponses