booking form:Price change on selecting different option from dropdown list - PHP and Javascript

I have online hotel booking system script, where the room prices and开发者_运维技巧 room types are pulled out from the database using php. I only have 2 rooms in this system. One accommodates up to 4 people, the other one up to 6. The booking form has From and To dates, Type of room (x suite), which can be selected from 0 to 1, followed by price x 120 per room per night. I also have an option to select number of People. There is set price of 120 per room per night for up to 2 people. For every additional person 20 is added to the price. so if there is 3 people in suite, the price would be 140. I tried to make it work myself, but i just cannot make the price change according to number of people selected. The code for select tag for people is as follows:

<select name="people" class="FormFields" onChange="checkBookingForm()" style="width:70px">
        <?php for ($i=1; $i<=$SETTINGS["room_people"]; $i++) {
                if ($i==$_REQUEST["people"]) {
                    $selected='selected';
                    }
                    else { 
                    $selected='';
                    }
        ?>
        <option value="<?php echo $i; ?>" <?php echo $selected; ?>><?php echo $i; ?></option>
        <?php }; ?>
        </select>

The function checkBookingForm() deals with text change when a particular room is selected and it will show the number of people this room accommodates. the function is here:

<script language="javascript" type="text/javascript">

function checkBookingForm() { var allRooms=new Array(); var totalPeople = 0;

for(i=0; i<document.NewBookingFrm.elements.length; i++) {
    if(document.NewBookingFrm.elements[i].type=="select-one") {
        name_t = document.NewBookingFrm.elements[i].name;
        if (name_t!=='people') {
            value_t = document.NewBookingFrm.elements[i].value;
            totalPeople = parseInt(allRooms[name_t]) * parseInt(value_t) + totalPeople;
        }
    }
}

if (totalPeople==1) {
    var acP = 'person';
} else {
    var acP = 'people';
};


if (totalPeople!=document.NewBookingFrm.people.value) {
    totalPeople = '<strong style="color:red; font-size:14px">'+totalPeople+'</strong>'
}

document.getElementById('PeopleAccommodate').innerHTML = 'selected room(s) can accommodate ' + totalPeople + ' ' + acP;

}

I have tried different things, but as I am learning Javascript at the same time, I am not getting anywhere. I am still trying to understand how DOm works. If anybody can point me to the right direction it would be really appreciated. I understand what I have to do with the code:

1. check first how many people are selected
2. then check if any of the rooms is selected (if value is 1)
3. and if one room is selected then increase the price accordingly or decrease it.

for number of available rooms I currently have this code:

 <select name="room_<?php echo ReadFromDB($row["id"]); ?>" class="FormFields" onChange="checkBookingForm()" style="width:70px">
    <option value="0">0</option>
    <?php for ($i=1; $i<=$available_rooms; $i++) {
        if ($i==$booked_rooms["quantity"]) $selected=' selected'; else $selected='';
    ?>
    <option value="<?php echo $i; ?>"<?php echo $selected; ?>><?php echo $i; ?></option>
    <?php }; ?>
    </select>
    x

the link to a more complete code: http://jsfiddle.net/x6ZYB/

well you mix php and html in an unusual way you should use heredoc for a better code maybe?

well you shouldnt post the php code there are many errors hm why not trying to fetch with jquery and .value() the value of the inputs when they are clicked and change the price with .html() ?

well the code is a mess for me do you have a html output of this as an example? and also the div where the price is written that is calculated?