booking form:Price change on selecting different option from dropdown list - PHP and Javascript
<p>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 <strong>From</strong> and <strong>To</strong> dates, <strong>Type of room</strong> (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 <strong>People</strong>. 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: </p>

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

<p>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:</p>

<pre><code>&lt;script language="javascript" type="text/javascript"&gt;
</code></pre>

<p>function checkBookingForm() {
    var allRooms=new Array();

    var totalPeople = 0;</p>

<pre><code>for(i=0; i&lt;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 = '&lt;strong style="color:red; font-size:14px"&gt;'+totalPeople+'&lt;/strong&gt;'
}

document.getElementById('PeopleAccommodate').innerHTML = 'selected room(s) can accommodate ' + totalPeople + ' ' + acP;
</code></pre>

<p>}</p>

<p></p>

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

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

<p>for number of available rooms I currently have this code:</p>

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

">


<p>the link to a more complete code: <a href="http://jsfiddle.net/x6ZYB/" rel="nofollow">http://jsfiddle.net/x6ZYB/</a></p>
