calculation within form before submit

Hi Guys!

There are 3 fields in my form:
1. Start Date (datetime picker)
2. End Date (datetime picker)
3. Amount of Days (textbox)

I need to calculate the amount of days, based on Start Date input and End Date input.
Simply to say: Amount of days = End Date - Start Date
or: field3=field2-field1

Any suggestions for the respective code? I guess this should be javascript within the form code?
This calculation needs to be done before submit, so that the field3 is automatically filled in as soon as user picks the Start Date and End Date from the calendar within the form.

I use chronoforms 4.0 RC3.3
Below is the form code.
Thanks, Raivis

<div class="ccms_form_element cfdiv_datetime" id="start_date_container_div">
<label for="start_date">Select Start Date</label>
<input id="start_date" maxlength="150" size="16" class="cf_date_picker" title="" type="text" value="" name="start_date" />

<div class="clear"></div><div id="error-message-start_date"></div></div>

<div class="ccms_form_element cfdiv_datetime" id="finish_date_container_div">
<label for="finish_date">Select Finish Date</label>
<input id="finish_date" maxlength="150" size="16" class="cf_date_picker" title="" type="text" value="" name="finish_date" />

<div class="clear"></div><div id="error-message-finish_date"></div></div>

<div class="ccms_form_element cfdiv_text" id="total_days_container_div">
<label for="total_days">Total Days</label>
<input id="total_days" maxlength="150" size="10" class=" validate['required','number']" title="" type="text" value="" name="total_days" />

<div class="clear"></div><div id="error-message-total_days"></div></div>

Hi Raivis,

Which datepicker are you using (there's a choice in CFv4 RC3.3)? The easiest thing is probably to link some code to the OnSelect event of the datepickers so that the calculation is done whenever one of the dates changes. You'd need to use the Advanced Datepicker action to set up the onSelect option and then add the JavaScript to do the work in a Load JS action in the On Load event.

Bob

Hi Bob,

I am still on this issue.
I am using Default (by MonkeyPhysics) DatePicker Type.

Do you think to make this calendar field as Custom Element (HTML/PHP) field, and then use the class="cf_date_picker" in order to specify the action code? Or how you mean this

use the Advanced Datepicker action

?

Thanks Bob,
Raivis

Hi Raivis,

There's a Custom DatePicker action in the Power Fields group that you can use.

Bob

Hey Bob & Raivis,

is there any solution for this problem yet?

I have a similar issue. My Guests should select a date and a duration of nights they would like to stay. When they have done it i would like for them to see (after they made the selection) until wich date they stay and how much it cost.
The same information i would like to send with the email too.

I used the wizard to create the form. This is the code i got from it:

<div id="error-message-input_text_19"></div></div><div class="ccms_form_element cfdiv_datetime multiline_start" id="autoID-56bddb6e6b9fb625fd2d4d3ddfd7aae8_container_div" style=""><label>From Date</label><input maxlength="150" size="16" class=" validate['required','target:input_datetime_1_clone_id'] cf_date_picker" title="Select date" type="text" container_id="0" value="" name="input_datetime_1" />
<div class="small-message">Please select arrival date.</div><div class="clear"></div><div id="error-message-input_datetime_1"></div></div>

<div class="ccms_form_element cfdiv_select" id="autoID-7fcd5eeeb28b28dd70609063f4bec5bc_container_div" style=""><label>Nights</label><select size="1" class=" validate['required']" title="" container_id="0" name="input_select_20">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<div class="small-message">How many nights do you like to stay with us?</div><div class="clear"></div><div id="error-message-input_select_20"></div></div>

div class="ccms_form_element cfdiv_select" id="autoID-059652cb0a18252ca418dbc941e9538e_container_div" style=""><label>Guests</label><select size="1" class=" validate['required']" title="" container_id="0" name="input_select_15">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="small-message">Please select number of guests.</div>

<div class="clear"></div><div id="error-message-input_select_15"></div></div><div class="ccms_form_element cfdiv_select" id="autoID-d3b13ad21bb26082f3811563d585a47a_container_div" style=""><label>Room</label><select size="1" class=" validate['required']" title="" container_id="0" name="input_select_14">
<option value="" selected="selected"></option>
<option value="Single Room">Single Room</option>
<option value="Double Room">Double Room</option>
<option value="Dorm Room">Dormitory Room</option>
</select>
<div class="small-message">Please select room.</div><div class="clear"></div>

After they hat choosen the Date / nights/ number of guests and which room they would like to stay in, i would like the form to calculate the departure date, and the costs. This information shall be contained in the email (to me and to the guest) as well.

How can i do it? Is there any coding specialist?

I appreaciate your help.

Cheers Cyripton

Hi cyripton,

I don't think that there is a problem to solve. If you need a custom calculation you can add JavaScript in a form Load JS action or PHP in a Custom Code action after the form is submitted.

Bob

I achieved the task as Bob suggested - javascript code onLoad.

If anybody needs example on this then you can take a look at http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

Brgds,
Raivis

Hey Raivis,

this is the exemple i could find and used to try to get the form calculated.
I tried with a small script first to see how it works.

I wrote the following:

var room_prices= new Array();
room_prices[""]=0;
room_prices["Single Room"]=40000;
room_prices["Double Room"]=56000;
room_prices["Dorm Room"]=25000;

function getSelectedRoom()
{
var selectedroomsize=0;
var theForm = document.forms["chronoform_Reservation"];
var selectedRoom =  theForm.elements["selectedroom"];
var selectedroomsize = room_prices[selectedRoom.value];
return selectedroomsize;
}
function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var roomPrice = getSelectedRoom();
 
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                      "Total Price For Room $"+roomPrice;
}

When i place this code in the OnLoad / Load JS event, and create a custom element with the html code:

<div id="totalPrice"></div>

Than nothing happened as soon as i select the room. I don't know what the problem could be.

This is the Formcode for the Javascript section:

<div class="ccms_form_element cfdiv_select" id="selectedroom_container_div" style=""><label for="selectedroom">Room*</label><select size="1" id="selectedroom" class=" validate['required']" title="" container_id="0" name="input_select_14">
<option value="" selected="selected"></option>
<option value="Single Room">Single Room</option>
<option value="Double Room">Double Room</option>
<option value="Dorm Room">Dormitory Room</option>
</select>
<div class="small-message">Please select room.</div><div class="clear"></div><div id="error-message-input_select_14"></div></div>

Can you help me please to figure out where my mistake is?

Thanks a lot.

Cheers Cyripton

Hi cyripton,

You miss event action - when (on which event) the calculation should be done. Like e.g.

onchange="getTotal()"

You can add this event into <select> tag of your form (then you will have to save it as custom code and can not use form wizard), but this is not good practice.

Much better if you use the same javascript and add Event Listeners into your calculation code.
Here is the example you can use:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(addListeners);

function addListeners(){
	if(window.addEventListener) {
document.getElementById('selectedroom').addEventListener("change",getTotal,false);
	} else if (window.attachEvent){ // Added For Internet Explorer versions previous to IE9
document.getElementById('selectedroom').attachEvent("onchange", getTotal);
	}
}

This should work, just modify to your needs. At least I tested it and it did work.

And don't forget to add <div> tag where you want to display result, in your case <div id="totalPrice"></div>

Brgds,
Raivis

Cooool, it is working now🙂. Thanks a lot for your big help.

Now i will try to put the rest of the calculation in.

(When i use the Dynamic File, it is not working?!?! Any suggestions why? Anyway i will continue to make the calculation working first and than the other problems😀 )

Cheers Mike

Hi cyripton,

Don't use the Dynamic File if you can avoid it. Sometimes is messes up the order in which scripts load and they don't work.

Bob

PS There's nothing wrong with raivis' code but as MooTools is probably loading most of it is built-in. Try this instead:

window.addEvent('domready', function() {
  var room_prices= new Array();
  room_prices[""]=0;
  room_prices["Single Room"]=40000;
  room_prices["Double Room"]=56000;
  room_prices["Dorm Room"]=25000;
  
  $('selectedroom').addEvent('change, function(){
    $('totalPrice').innerHTML = "Total Price For Room $"+room_prices[$('selectedroom').value];
  });
});

Bob

Hey Bob, Raivis & all the others,

i got the code working. There is only one fault left. In the calculation i use a If / Else function to do a different calculation if dorm room is selected. But the script is not using the third value. (or it is going always to the else function). My problem is that i do not see where the fault is coming from.

Here my Javascript:

// JavaScript Document
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

var room_nights= new Array();
room_nights[""]=0;
room_nights["1"]=1;
room_nights["2"]=2;
room_nights["3"]=3;
room_nights["4"]=4;
room_nights["5"]=5;
room_nights["6"]=6;
room_nights["7"]=7;
room_nights["8"]=8;
room_nights["9"]=9;
room_nights["10"]=10;
room_nights["11"]=11;
room_nights["12"]=12;
room_nights["13"]=13;
room_nights["14"]=14;
room_nights["15"]=15;
room_nights["16"]=16;
room_nights["17"]=17;
room_nights["18"]=18;
room_nights["19"]=19;
room_nights["20"]=20;
room_nights["21"]=21;
room_nights["22"]=22;
room_nights["23"]=23;
room_nights["24"]=24;
room_nights["25"]=25;
room_nights["26"]=26;
room_nights["27"]=27;
room_nights["28"]=28;
room_nights["29"]=29;
room_nights["30"]=30;


function getSelectedNights()
{
var selectednights = 0;
var theForm = document.forms["chronoform_Reservation"];
var numbernights = theForm.elements["nights"];
var selectednights = room_nights[numbernights.value];
return selectednights;
}

var room_guests= new Array();
room_guests[""]=0;
room_guests["1"]=1;
room_guests["2"]=2;
room_guests["3"]=3;
room_guests["4"]=4;
room_guests["5"]=5;
room_guests["6"]=6;
room_guests["7"]=7;
room_guests["8"]=8;
room_guests["9"]=9;
room_guests["10"]=10;

function getSelectedGuests()
{
var selectedguests=0;
var theForm = document.forms["chronoform_Reservation"];
var amountGuests =  theForm.elements["guestnumber"];
var selectedguest = room_guests[amountGuests.value];
return selectedguests;
}


var room_prices= new Array();
room_prices[""]=0;
room_prices["SingleRoom"]=40000;
room_prices["DoubleRoom"]=56000;
room_prices["DormitoryRoom"]=25000;

function getSelectedRoom()
{
var selectedroomsize=0;
var theForm = document.forms["chronoform_Reservation"];
var selectedRoom =  theForm.elements["selectedroom"];
var selectedroomsize = room_prices[selectedRoom.value];
return selectedroomsize;
}

addLoadEvent(addListeners);

function addListeners(){
   if(window.addEventListener) {
document.getElementById('selectedroom').addEventListener("change",getTotal,false);
document.getElementById('nights').addEventListener("change",getTotal,false);
document.getElementById('guestnumber').addEventListener("change",getTotal,false);
   } else if (window.attachEvent){ // Added For Internet Explorer versions previous to IE9
document.getElementById('selectedroom').attachEvent("onchange", getTotal);
document.getElementById('nights').attachEvent("onchange", getTotal);
document.getElementById('guestnumber').attachEvent("onchange", getTotal);
   }
}

function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together

var theForm = document.forms["chronoform_Reservation"];
var selectedRooms =  theForm.elements["selectedroom"];
    
if (selectedRooms != "DormitoryRoom"){    
    
var roomPrice = getSelectedRoom()*getSelectedNights();
}  

else if(selectedRooms == "DormitoryRoom"){

    var roomPrice = getSelectedGuests()*getSelectedRoom()*getSelectedNights();
}
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                      "Total Price For Room ₩ "+roomPrice;
}

and here my Table Code:

<div class="ccms_form_element cfdiv_header" id="autoID-189ad786591ee4abb7cbd881dc41d4d8_container_div" style=""><h2><b>Please make your reservation here.</b></h2>
Fields marked with "<b>*</b>" are required!
<p></p><div class="clear"></div></div><div class="ccms_form_element cfdiv_text" id="name_container_div" style=""><label for="name">Firstname, Lastname*</label><input id="name" maxlength="150" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="input_text_8" />
<div class="small-message">Please enter yout first- and lastname.</div><div class="clear"></div><div id="error-message-input_text_8"></div></div><div class="ccms_form_element cfdiv_text" id="email_container_div" style=""><label for="email">Email*</label><input id="email" maxlength="150" size="30" class=" validate['required','email']" title="" type="text" container_id="0" value="" name="input_text_13" />
<div class="small-message">Please enter your email adress.</div><div class="clear"></div><div id="error-message-input_text_13"></div></div><div class="ccms_form_element cfdiv_text" id="phone_container_div" style=""><label for="phone">Phone</label><input id="phone" maxlength="150" size="30" class=" validate['number']" title="" type="text" container_id="0" value="" name="input_text_19" />
<div class="small-message">If you have a phonenumber, please enter here.</div><div class="clear"></div><div id="error-message-input_text_19"></div></div><div class="ccms_form_element cfdiv_datetime multiline_start" id="arrivaldate_container_div" style=""><label for="arrivaldate">Arrival Date*</label><input id="arrivaldate" maxlength="150" size="16" class=" validate['required','target:input_datetime_1_clone_id'] cf_date_picker" title="Select date" type="text" container_id="0" value="" name="input_datetime_1" />
<div class="small-message">Please select arrival date.</div><div class="clear"></div><div id="error-message-input_datetime_1"></div></div><div class="ccms_form_element cfdiv_select multiline_add" id="arrivaltime_container_div" style=""><label for="arrivaltime">Arrival Time*</label><select size="1" id="arrivaltime" class=" validate['required']" title="Arrival Time" container_id="0" name="input_select_7">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="05:00">05:00</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00" selected="selected">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
<option value="23:00">23:00</option>
</select>
<div class="small-message">Please specify your arrival time.</div><div class="clear"></div><div id="error-message-input_select_7"></div></div><div class="ccms_form_element cfdiv_select" id="nights_container_div" style=""><label for="nights">Nights*</label><select size="1" id="nights" class=" validate['required']" title="" container_id="0" name="input_select_31">
<option value=""></option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<div class="small-message">Please select how many nights to stay.</div><div class="clear"></div><div id="error-message-input_select_31"></div></div><div class="ccms_form_element cfdiv_select" id="guestnumber_container_div" style=""><label for="guestnumber">Guests*</label><select size="1" id="guestnumber" class=" validate['required']" title="" container_id="0" name="input_select_15">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="small-message">Please select number of guests.</div><div class="clear"></div><div id="error-message-input_select_15"></div></div><div class="ccms_form_element cfdiv_select" id="selectedroom_container_div" style=""><label for="selectedroom">Room*</label><select size="1" id="selectedroom" class=" validate['required']" title="" container_id="0" name="input_select_14">
<option value="" selected="selected"></option>
<option value="SingleRoom">Single Room</option>
<option value="DoubleRoom">Double Room</option>
<option value="DormitoryRoom">Dormitory Room</option>
</select>
<div class="small-message">Please select room.</div><div class="clear"></div><div id="error-message-input_select_14"></div></div><div class="ccms_form_element cfdiv_custom" id="input_id_30_container_div" style=""><label for="input_id_30">Price</label><div id="totalPrice"></div><div class="clear"></div><div id="error-message-input_custom_30"></div></div><div class="ccms_form_element cfdiv_textarea" id="autoID-7716542ad9aa32ec101949e2599b967c_container_div" style=""><label>Comments</label><textarea cols="60" rows="5" class="" title="" container_id="0" name="input_textarea_28"></textarea>
<div class="small-message">Please use this box to leave speacial wishes.</div><div class="clear"></div><div id="error-message-input_textarea_28"></div></div><div class="ccms_form_element cfdiv_text" id="autoID-a15e85f0b7fb9fdd7b20b7be9d447899_container_div" style=""><label>Enter the code*</label><input maxlength="5" size="5" class="chrono_captcha_input validate['required']" title="" type="text" container_id="0" wf_key="18" value="" name="chrono_verification" />
{chronocaptcha_img}<div class="clear"></div><div id="error-message-chrono_verification"></div></div><div class="ccms_form_element cfdiv_submit" id="autoID-13acc8dee79af25314be6ce563f7d88e_container_div" style="text-align:left"><input name="input_submit_17" class="" value="Submit" type="submit" container_id="0" />
<div class="clear"></div><div id="error-message-input_submit_17"></div></div>

I hope you can help me with this.

Thanks a lot.

Cheers Cyripton

Hi

Not tested but here's a shortened version

window.addEvent('domready', function() {
    $('selectedroom').addEvent('change', getTotal());
    $('nights').addEvent('change', getTotal());
    $('guestnumber').addEvent('change', getTotal());
});

function getTotal() {
    var nights, selectedRooms, roomPrice, roomPrices, totalPrice, guests;
    room_prices = new Array();
    room_prices[""] = 0;
    room_prices["SingleRoom"] = 40000;
    room_prices["DoubleRoom"] = 56000;
    room_prices["DormitoryRoom"] = 25000;

    nights = $('nights').value;
    selectedRoom = $('selectedroom').value;
    roomPrice = room_prices[selectedRoom];
    guests = 1;    
    if (selectedRooms == "DormitoryRoom") {
        guests = $('guestnumber').value;
    }
    totalPrice = guests * roomPrice * nights;
    //display the result
    $('totalPrice').text = "Total Price For Room ₩ " + totalPrice;
}

Bob

Hey Bob,

i copied the code in the Load JS, but it is not working. It is showing nothing in the form.

Cheers Cyripton

Hi Cyripton,

The script looks OK to me - but it may well need debugging.

Bob

Hey Bob,

i used FireBug to debugg the code. The following faults has been shown as soon as i selected any of the selection fields.

};var c=Element.NativeEvents[g];if(c){if(c==2){e=function(k){k=new DOMEvent(k,j.getWindow());if(d.call(j,k)===false){k.stop();}};}this.addListener(g,e,arguments[2]);

TypeError: d is undefined
...==2){e=function(k){k=new DOMEvent(k,j.getWindow());if(d.call(j,k)===false){k.sto...
Mootools-core.js (line 368)

Cyripton

Hi cyripton,

I tracked down a few typos and mistakes on my part

window.addEvent('domready', function() {
  $('selectedroom').addEvent('change', getTotal);
  $('nights').addEvent('change', getTotal);
  $('guestnumber').addEvent('change', getTotal);
});

function getTotal() {
  var nights, selectedRooms, roomPrice, roomPrices, totalPrice, guests;
  room_prices = {
    '' : 0,
    'SingleRoom' : 40000,
    'DoubleRoom' : 56000,
    'DormitoryRoom' : 25000
  };
  nights = $('nights').value;
  selectedRoom = $('selectedroom').value;
  roomPrice = room_prices[selectedRoom];
  guests = 1;   
  if (selectedRoom == "DormitoryRoom") {
      guests = $('guestnumber').value;
  }
  totalPrice = guests * roomPrice * nights;
  $('totalPrice').set('text', "Total Price For Room ₩ " + totalPrice);
}

Bob