Booking-form dropdown menu (php)

I’m working on a hotel booking project (php) and I want to create a booking-form where I will have :

Checking Date(datepicker)

Checkout Date(datepicker)

Room type (Here I want to have a dropdown menu, <select><option>Single</option></select>, and when a option is selected to show me the price of that room type, without pressing any button.)

Price (this is a text, not a textbox)(And here I want to show me the price of that room type.)

I have the query that gives me the price data from table, put I don’t know how to show me without pressing any button, just when I select the “Single Room” option, the price field should be $30 (this is data from table, for example).

Can you give me an idea ? Is a specific function for <select> tag for this ?

<?php
 if(isset($_POST['submit'])){
    $tip  = isset($_POST['roomtype']) ? mysql_real_escape_string($_POST['roomtype']) : '';
     echo $tip;
    }
 ?>

This is my php code, but its work only if I hit ‘submit’. I want to work when I select the option.

Answer

Use the following example

<select class="text_select" id="field_6" name="field_6">    
   <option value="- Select -">- Select -</option>  
   <option value="Option One">Option One</option>  
   <option value="Option Two">Option Two</option>  
   <option value="Option Three">Option Three</option>  
</select>

<label class="form_field">Your selected <span id="aggregator_name"></span>?</label>

and jquery

function notEmpty(){

var e = document.getElementById("field_6");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('aggregator_name').innerHTML = strUser;

}
notEmpty()

    document.getElementById("field_6").onchange = notEmpty;

jsfiddle link http://jsfiddle.net/Mj4Vj/

Advertisement

Answer