Onvalue change liste deroulant

Résolu
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -  
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -
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 :)

A voir également:

8 réponses

Réponse 1 / 8
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 2 / 8
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
 
Dans un formulaire je presume ?
0
Réponse 3 / 8
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Oui, c'est un formulaire
0
Réponse 4 / 8
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
 
regarde deja ça https://openclassrooms.com/forum/sujet/ajouter-une-ligne-a-un-tableau-html-avec-javascript-30348
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
 
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
Réponse 6 / 8
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Merci pour le lien je suis en train de le lire... Sinon, je n'ai pas très bien compris ton conseil...
0
Réponse 7 / 8
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
 
http://www.editeurjavascript.com/scripts/scripts_formulaires_3_653.php

Y a tout sauf la ligne <form ...>
0
Réponse 8 / 8
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
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
jaljad Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
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

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses