Auto calculate the amount of stays according to selected dates

**Macario** · 17-11-2009

After spending several hours on Google, I still have not found any solution to my problem. I have a form for users wishing to request a reservation for their stay in line and I hope that, when completing the form, appears (in a textarea, for example) the total of their stay depending on the arrival and departure date they will come to know in the form. In short automatically calculate the amount of user stay according to selected dates!

The main difficulty is that there are 2 different prices: 22/day during the week and 50/weekend (Fri to Sun)! All this must be multiplied by the number of people, of course...

For example, a user who wishes to reserve for 2 people, 13.11 to 17.11:
- In "date of arriving": 13.11
- In "date of departure": 17.11
- For "2 persons"
- We, 13.11 to 15.11 = 50 + 16.11 = 22 + 17.11 = 22, 50 + 22 + 22 = 94/person, so 188 bugs

I can control some basics of html and javascript ...

Is there someone who can explain me how to achieve this?

**!const** · 17-11-2009

Here is the small code how to structure your site:

Code:

function priceDay(date)
{
    typeDay = getDay(date)
    // type of day begins to 0 (Sunday) => 6 (Saturday) 
    if ((typeDay == 0) || (typeDay == 6))
        return 50;
    else
        return 22;
}
if dayDeparture < dayArrival
displays error
else
for each day of dayArrival to dayDeparture 
priceJourney = priceDay(dayInProcess);
sum += numberPerson * priceJourney;

**Macario** · 17-11-2009

In effect, this would be a start of track and thank you but how to put it concretely in a html code to put on my page?

Here is the form that is currently online:

HTML Code:

<html>
<head>
  <script>function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required" ){
if (((tempobj.type=="text"||tempobj.type=="textarea" )&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("Some fields in this form are required, thank you kindly inform them" )
return false
}
else
return true
}
  </script>
</head>
<body>
<form action="http://me0.free.com/cgi-bin/form2mail.pl"
onsubmit="return checkrequired(this)" method="post"
name="RESERVATION">
  <table style="text-align: left; width: 556px;" border="1"
cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <td style="font-family: Helvetica Neue; width: 100px;"><small>Name*</small></td>
        <td style="font-family: Helvetica Neue; width: 181px;"><small><input
name="requiredNAME"></small></td>
        <td style="font-family: Helvetica Neue; width: 62px;"><small>Name*</small></td>
        <td style="font-family: Helvetica Neue; width: 179px;"><small><input
name="requiredPRENAME"></small></td>
      </tr>
      <tr>
        <td style="font-family: Helvetica Neue; width: 100px;"><small>Address*</small></td>
        <td colspan="3" rowspan="1" style="font-family: Helvetica Neue; width: 179px;"><small><input size="50" name="requiredADDRESS"></small></td>
      </tr>
      <tr>
        <td style="font-family: Helvetica Neue; width: 100px;"><small>Code
postal*</small></td>
        <td style="font-family: Helvetica Neue; width: 181px;"><small><input
maxlength="5" size="10" name="requiredCODE_POSTAL"></small></td>
        <td style="font-family: Helvetica Neue; width: 62px;"><small>City*</small></td>
        <td style="font-family: Helvetica Neue; width: 179px;"><small><input
name="requiredCITY"></small></td>
      </tr>
      <tr>
        <td style="font-family: Helvetica Neue; width: 100px;"><small>Phone*</small></td>
        <td style="font-family: Helvetica Neue; width: 181px;"><small><input
name="requiredTELEPHONE"></small></td>
        <td style="font-family: Helvetica Neue; width: 62px;"><small>Email*</small></td>
        <td style="font-family: Helvetica Neue; width: 179px;"><small><input
name="requiredEMAIL"></small></td>
      </tr>
    </tbody>
  </table>
  <br>
  <table style="text-align: left; width: 511px;" border="1"
cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <td style="width: 110px; font-family: Helvetica Neue;"><small>Arrival Date*</small></td>
        <td style="width: 150px; font-family: Helvetica Neue;"><small><input
size="15" value="dd/mm/yyyy" name="ARR_DATE"></small></td>
        <td style="width: 110px; font-family: Helvetica Neue;"><small>Arrival Time*</small></td>
        <td style="width: 111px; font-family: Helvetica Neue;"><small>
        <select name="ARR_Time">
        <option selected="selected">After 17h00</option>
        </select>
        <br>
        </small></td>
      </tr>
      <tr>
        <td style="width: 110px; font-family: Helvetica Neue;"><small>Date of 
Departure*</small></td>
        <td style="width: 150px; font-family: Helvetica Neue;"><small><input
size="15" value="dd/mm/yyyy" name="DEP_DATE"></small></td>
        <td style="width: 110px; font-family: Helvetica Neue;"><small>Departure Time*</small></td>
        <td style="width: 111px; font-family: Helvetica Neue;"><small>
        <select name="DEP_Time">
        <option selected="selected">Before 15h00</option>
        </select>
        <br>
        </small></td>
      </tr>
    </tbody>
  </table>
  <br>
  <table style="text-align: left; width: 314px;" border="1" cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <td style="width: 80px; font-family: Helvetica Neue;"><small>Adultes*</small></td>
        <td style="width: 60px; font-family: Helvetica Neue;"><small>
        <select name="ADULTES">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        </select>
        </small></td>
        <td style="width: 80px; font-family: Helvetica Neue;"><small>Infants*</small></td>
        <td style="width: 60px; font-family: Helvetica Neue;"><small>
        <select name="INFANTS">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        </select>
        </small></td>
      </tr>
    </tbody>
  </table>
  <small><span style="font-family: Helvetica Neue;"></span></small><br>
  <table style="text-align: left; width: 450px;" border="1" cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <td style="width: 113px; font-family: Helvetica Neue;"><small>Small 
breakfasts</small></td>
        <td style="width: 48px; font-family: Helvetica Neue;"><small>
        <select name="SMALL BREAKFASTS">
        <option selected="selected">0</option>
        </select>
        <br>
        </small></td>
        <td style="width: 76px; font-family: Helvetica Neue;"><small>Breakfast</small></td>
        <td style="width: 48px; font-family: Helvetica Neue;"><small>
        <select name="BREAKFASTS">
        <option selected="selected">0</option>
        </select>
        <br>
        </small></td>
        <td style="width: 60px; font-family: Helvetica Neue;"><small>Dinners</small></td>
        <td style="width: 55px; font-family: Helvetica Neue;"><small>
        <select name="DINNERS">
        <option selected="selected">0</option>
        </select>
        <br>
        </small></td>
      </tr>
    </tbody>
  </table>
  <small><span style="font-family: Helvetica Neue;">Beautiful kitchen and many dining opportunities around.</span></small><br>
  <br>
  <input name="OK" value="Validate" type="submit"><br>
</form>
</body>
</html>

**absolute55** · 17-11-2009

Now here is the principle of a javascript function that is acquired. When would you like to fill the textarea with the amount of the stay? When the user enters the dates, or when they click a button in the form? While answering this question, you can determine the events (as defined in javascript) on which you call this function.

**Macario** · 17-11-2009

Ideally, I would have a practical insight into the html code that I will put in my page because as said earlier, I have a few basic knowledge about Javascript and HTML but can not build myself a particular page.

To answer your first question, it would be really great that it fills the textarea and it will update all alone when the user tap the date of arrival, departure and the number of people; do you have an idea?

To simplify a little thing I thought of something else. If the rate does not change (it is on weekdays or weekends), and that the example set by amount 24 per day, can someone send me the code to insert?

Specifically:
Arrival date: arr
Departure Date: dep
Number of adult (s): adu
Number of children (s): ch

So the calculation should be:
dep - arr = dur (stay)
dur x 24 = amt (amount of stay per person)
amt x (adu + ch) = total stay