Note that there are some explanatory texts on larger screens.

plurals
  1. PObooking form:Price change on selecting different option from dropdown list - PHP and Javascript
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload