Forums

Hey guys,

I want to build in some realtime calculation in my form, but I am having some problems.
First I tried it by the instructions in this post: http://chronoengine.com/forums.html?cont=posts&f=2&t=66188&p=266323&hilit=calculation#p266323
It worked, except for the part to add up two values: value box 1 + value box 2 = total was this: 100 + 20 = 10020

Because I needed something more complex with dropdown and checkbox I read this tutorial:
http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml
I got it working with Custom Forms HTML code.

Now I want to integrate it with a form build with Wizard Forms HTML code. This is what I got:

My Wizard Forms HTML code is this:

<div class="ccms_form_element cfdiv_select" id="pakket_container_div">
	<label for="pakket">Vacaturepakket *</label>
	<select size="1" id="pakket" class=" validate['required']" title="" name="pakket">
		<option value="">Kies een pakket</option>
		<option value="Basic">Basic (€ 100,00)</option>
		<option value="Medium">Medium (€ 320,00)</option>
		<option value="Premium">Premium (€ 1050,00)</option>
		<option value="Ultimate">Ultimate (€ 1800,00)</option>
	</select>
	</div>
	
<div class="ccms_form_element cfdiv_checkbox" id="opvallend_container_div">
	<input value="20" id="opvallend" title="" type="checkbox" name="opvallend" class="label_left" />
	<label for="opvallend">Vacatures opvallend weergeven?</label>
</div>
	
<div class="ccms_form_element cfdiv_text" id="prijs_container_div">
	<label for="prijs">Prijs</label>
	<input id="prijs" maxlength="150" size="30" class="" title="" type="text" value="" name="prijs" />
</div>

Javascript:

window.addEvent('domready', function()
{
  $('pakket').addEvent('change', berekenTotaal);
  $('opvallend').addEvent('change', berekenTotaal);
}
);
 
//Dropdown value's to prices
var pakket_prijzen= new Array();
 pakket_prijzen["Basic"]=100;
 pakket_prijzen["Medium"]=320;
 pakket_prijzen["Premium"]=1050;
 pakket_prijzen["Ultimate"]=1800;

//Calculate PakketPrijs
function getPakketPrijs()
{
    var PakketPrijs=0;
    var theForm = document.ChronoContact["Vacatureformulier"];
    var selectedPakket = theForm.elements["pakket"];
    PakketPrijs = pakket_prijzen[selectedPakket.value];
    return PakketPrijs;
}

//Calculate OpvallendPrijs
function getOpvallendPrijs()
{
    var OpvallendPrijs=0;
    var theForm = document.ChronoContact["Vacatureformulier"];
    var OpvallendPlaatsen = theForm.elements["opvallend"];
    if(opvallend.checked==true)
    {
        OpvallendPrijs=20;
    }
    return OpvallendPrijs;
}

//Calculate Total
function berekenTotaal()
{
    var TotaalPrijs = getPakketPrijs() + getOpvallendPrijs();
    $('prijs').value = "Pakket totaalprijs is €"+TotaalPrijs;
}

Problem is it's not displaying the value in the textbox with id 'prijs'.
With var theForm I've tried document.ChronoContact["Vacatureformulier"] and document.ChronoContact_Vacatureformulier and document.forms["Vacatureformulier"] but it is not working.

Help is much appreciated!

Hi Windwachter,

This simplified version of the script works OK.

window.addEvent('domready', function() {
  $('pakket').addEvent('change', berekenTotaal);
  $('opvallend').addEvent('change', berekenTotaal);
});

//Dropdown values to prices
var pakket_prijzen= new Array();
pakket_prijzen["Basic"]=100;
pakket_prijzen["Medium"]=320;
pakket_prijzen["Premium"]=1050;
pakket_prijzen["Ultimate"]=1800;

//Calculate Total
function berekenTotaal() {
  var PakketPrijs  = pakket_prijzen[$('pakket').value];
  var OpvallendPrijs = 0;
  if ( $('opvallend').checked == true ) {
    OpvallendPrijs = 20;
  }
  TotaalPrijs = parseInt(PakketPrijs) + parseInt(OpvallendPrijs);
  $('prijs').value = "Pakket totaalprijs is €"+TotaalPrijs;
}

Thnx GreyHead! The code is working.

Now I wanted to put in some more conditions for the value of OpvallendPrijs:

If the 'opvallend' checkbox is checked AND the value of PakketPrijs = 100 the value of OpvallendPrijs = 100
If the 'opvallend' checkbox is checked AND the value of PakketPrijs = 320 the value of OpvallendPrijs = 200

I've read a the tutorial on w3schools.com about it but it is not working. The code I've tried:

function berekenTotaal() {
  var PakketPrijs  = pakket_prijzen[$('pakket').value];
  var OpvallendPrijs = 0;
  if ( $('opvallend').checked == true && PakketPrijs = 100) 
  {
  OpvallendPrijs = 100;
  }
  else if ( $('opvallend').checked == true && PakketPrijs = 320) 
  {
  OpvallendPrijs = 200;
  }

Other codes of the second condition are not working as well:

PakketPrijs = Basic 
OR 
pakket_prijzen[$('pakket').value] = 100
OR
pakket_prijzen[$('pakket').value] = Basic
OR
$('pakket').value = 100
OR
$('pakket').value = Basic

Do you know what the correct code is for the second statement?

I have found what I did wrong. In stead of:

if ( $('opvallend').checked == true && PakketPrijs = 100)
  {
  OpvallendPrijs = 100;
  }

It should have been:

if ( $('opvallend').checked == true && PakketPrijs == 100)
  {
  OpvallendPrijs = 100;
  }

There should be 2 equal signs after PakketPrijs

Hi Windwachter,

Well found - that's an easy mistake to make and a hard one to find :-(

Bob

I have a similar problem. I want to do the same but adding radio buttons.
I tried as follows but does not work. What can be wrong with the code? thank you very much in advance.


here is the html:

<form action="http://localhost/xxxxxxx/index.php?option=com_chronoforms&tmpl=component&chronoform=price_calculator1&event=submit" name="price_calculator1" id="chronoform_price_calculator1" method="post" class="Chronoform"><div class="ccms_form_element cfdiv_checkbox" id="hosting_container_div" style=""><input type="hidden" name="hosting" value="" alt="ghost" />
<input checked="checked" value="1" id="hosting" title="" type="checkbox" class="validate['required'] label_left" name="hosting" />
<label for="hosting">Hosting</label><div class="clear"></div><div id="error-message-hosting"></div></div><div class="ccms_form_element cfdiv_radio" id="radiobox_container_div" style=""><label for="radiobox">Radio Box</label><input type="hidden" name="radiobox" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="radiobox" id="radiobox_0" title="" value="no" class="" />
<label for="radiobox_0">No</label>
<input type="radio" name="radiobox" id="radiobox_1" title="" value="yes" class="" />
<label for="radiobox_1">Yes</label>
</div><div class="clear"></div><div id="error-message-radiobox"></div></div><div class="ccms_form_element cfdiv_select" id="servicios_container_div" style=""><label for="servicios">Servicios</label><select size="1" id="servicios" class="" title="" name="servicios">
<option value="escoja un servicio">Escoja un Servicio</option>
<option value="servicio1">servicio 1 ($10)</option>
<option value="servicio2">servicio 2 ($20)</option>
<option value="servicio3">servicio 3 ($30)</option>
<option value="servicio4">servicio 4 ($40)</option>
</select>
<div class="clear"></div><div id="error-message-servicios"></div></div><div class="ccms_form_element cfdiv_select" id="hosting2_container_div" style=""><label for="hosting2">Hosting 2</label><select size="1" id="hosting2" class=" validate['required']" title="" name="hosting2">
<option value="full_host">Full Host</option>
<option value="base_host">Base Host</option>
</select>
<div class="clear"></div><div id="error-message-hosting2"></div></div><div class="ccms_form_element cfdiv_checkbox" id="personalizacion_container_div" style=""><input type="hidden" name="personalizacion" value="" alt="ghost" />
<input value="" id="personalizacion" title="" type="checkbox" name="personalizacion" class="label_left" />
<label for="personalizacion">Quiere agregar personalizacion?</label><div class="clear"></div><div id="error-message-personalizacion"></div></div><div class="ccms_form_element cfdiv_text" id="precio_container_div" style=""><label for="precio">Costo Total</label><input id="precio" maxlength="150" size="30" class="" title="" type="text" value="" name="precio" />
<div class="clear"></div><div id="error-message-precio"></div></div><input type="hidden" name="98a5080621a7a05db93963e1ded100d0" value="1" />
</form>

here is the JS:

    window.addEvent('domready', function() {
      $('servicios').addEvent('change', totales);
      $('personalizacion').addEvent('change', totales);
      $('hosting').addEvent('change', totales);
      $('hosting2').addEvent('change', totales);
      $('radiobox').addEvent('change', totales);
    });

    //Dropdown values to "servicios"
    var precio_servicios = new Array();
    precio_servicios["escoja un servicio"]=0;
    precio_servicios["servicio1"]=10;
    precio_servicios["servicio2"]=20;
    precio_servicios["servicio3"]=30;
    precio_servicios["servicio4"]=40;

    //Dropdown values to "hosting2" 
    var precio_hosting2 = new Array();
    precio_hosting2["full_host"]=495;
    precio_hosting2["base_host"]=485;


    //Calculate Dropdown Total
    function totales() {
     var precioHosting2 = precio_hosting2[$('hosting2').value];
     var precioServicios = precio_servicios[$('servicios').value]; 
    }


     //Radio Box para "radiobox"
    var precio_radiobox = new Array();
    precio_radiobox["no"]=10;
    precio_radiobox["yes"]=20;

    //Calculate radio button Total
function get_radio_value() {
var precioRadiobox = 0;
for (var i=0; i < document.price_calculator1.radiobox.length; i++)
   {
   if (document.price_calculator1.radiobox[i].checked)
      {
precioRadiobox = precio_radiobox[document.price_calculator1.radiobox[i].value];
      }
   }
}




    //Check Box para "Hosting"
      var precioHosting = 495;
      if ( $('hosting').checked == true ) {
        precioHosting = 495;
      }

     //Check Box para "Personalizacion"
      var precioPersonalizacion = 0;
      if ( $('personalizacion').checked == true ) {
        precioPersonalizacion = 200;
      }


      totales = parseInt(precioServicios) + parseInt(precioPersonalizacion) + parseInt(precioHosting2) + parseInt(precioHosting) + parseInt(precioRadiobox);

     //Text Box para "Precio"
      $('precio').value = "El costo total es $"+totales;
    }

I have not much knowledge of js and I used the form wizard
I'm pretty sure the error is in the radio box code.
thanks again!!
Pipo.-

This is the piece of code where I think the error is.
Is this right? Someone could fix it please!

//Radio Box para "radiobox"
var precio_radiobox = new Array();
precio_radiobox["no"]=10;
precio_radiobox["yes"]=20;

//Calculate radio button Total
function get_radio_value() {
var precioRadiobox = 0;
for (var i=0; i < document.price_calculator1.radiobox.length; i++)
   {
   if (document.price_calculator1.radiobox[i].checked)
      {
precioRadiobox = precio_radiobox[document.price_calculator1.radiobox[i].value];
      }
   }
}

Hi pipo,

It will probably help if you use console.log or breakpoints to check the values in your code and see exactly what is happening.

This StackOverFlow question has some MooTools code for getting the value of a radio button.

Bob

Bob, thanks for your quick response.
I'll try what you say.
thanks for the link!
Pipo.-

Hello i have been going through the examples and they have been very helpful, I got the calculations working the only thing im stuck on is how do I get the fields to except decimals? example I am using a form that has expenses and each expense is a dollar amount... $5.00, $10.38 all the form does is adds the fields up .... now how do i get it to work correctly?
I used this example

JS

       window.addEvent('domready', function() {
      $('aaa').addEvent('change', calculate);
      $('bbb').addEvent('change', calculate);
    });
    function calculate(){
      $('total').value = parseInt($('aaa').value) + parseInt($('bbb').value);
    }

HTML

    <input type="number" size="5" name="aaa" id="aaa" /><=>
    <input type="number" size="5" name="bbb" id="bbb" />  <=>
    <input type="number" size="5" name="total" id="total" /> 

Hi esl,

I'm not clear from your post what values you get in your form. Do they include the $sign and the decimal point?

ParseInt() is for parsing integer values from strings. ParseFloat() may be what you need. Check the JavaScript documents for more info.

Bob

I dont need the $ included, I included that in the html ... here is an example of what it will look like...

It worked! it was the parseFloat that did it, Thank you very much!