Forums

I would like to test a field 'member', if this it true I need to calculate 'total'= 'A' *3 + 'B' * 5.
The fields A, B are fields of the form and it should fill in the field 'total' on the form.

How does the form know its a form field? What syntax do I need to show the result. I found this, but this uses echo to show the result:

<?php
function isEven($nr) {
        return ($nr % 2) ? true : false;
}
// Voorbeeld
$getal = 123;
if(isEven($getal)) {
   echo '<br />' . $getal . ' is even!';
   // doe iets
}
else {
   echo '<br />' . $getal . ' is oneven!';
   // doe iets anders!
}
?>

Hi Pokemon,

If you want to do the calculation 'in the form' then you need to use JavaScript. You can only use PHP on the server after the form is submitted.

Bob

I found this site http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml to help me with the javascriptcode that I need.

But I don't understand how to implement it in chronoforms.

This is what i tried so far:
1) I added onchange in the html-code:
<input type="hidden" name="Member" value="" alt="ghost" onchange="CalculateTotal()/>
2) I made a new event and called it 'calculate', it has a load js action where I wrote the function

CalculateTotal()
function CalculateTotal()
{
    var Amount = (document.getElementById('Choise1')+document.getElementById('Choise2'))*Price()
    //show result
    document.getElementById('Amount').innerHTML = Amount;
}
Also a function Price() to set the right price for members:
function Price()
{    // the normal price is 8
    var Price=8;

    //Get a reference to the form id="MyformName" as I called it in form settings -form name
    var theForm = document.forms["MyformName"];

    //Get a reference to the checkbox id="Member"
    var Member = theForm.elements["Member"];
 
    //If the box is checked the price is set to 5
    if(Member.checked==true)
    {
        Price=5;
    }
    //finally we return the Price
    return Price;
}

Nothing is happening so far. Can you help me out with the missing steps?

Hi Pokemon,

First: JavaScript events and ChronoForms events are entirely different even though they are both called events. Your JavaScript needs to go into a Load JS action in the normal form On Load event.

Second: Adding and onChange action (or any other action) to a hidden input is probably not going to work because it won't change (unless some other JavaScript changes it).

Third: 'Member' is a text input so can't be checked?? I don't know where this value is supposed to come from?

This code might be an improvement:

window.addEvent('domready', function() {
  $('Choise1').addEvent('change', calculateTotal);
  $('Choise2').addEvent('change', calculateTotal);
});

function calculateTotal() {
  var price, amount;
  if ( $('Member').checked == true ) {
    price = 5;
  } else {
    price = 8; 
  }
  amount = (parseInt($('Choise1').value, 10) + parseInt($('Choise2').value, 10) ) * Price;
    $('Amount').innerHTML = amount;
}

Bob

Thanks for your help. Unfortunatly I don't see anything happen, when I typ something in the form.

I changed this:

if ( $('Member').checked == true ) {

in

if ( $('Member').checked == 0 ) {

because in the database 'Member' is 0 or 1.

If I understand well, this

$('Amount').innerHTML = amount;

means:

Amount is a field of my form, and amount is just a variabel. Should this code change the Amount-field of my form? What kind of field should it be then?

Hi pokemon,

because in the database 'Member' is 0 or 1.

Please change it back, this has nothing whatsoever to do with how the data is stores in the database, it is whether or not the checkbox is checked.

Amount is a field of my form, and amount is just a variabel. Should this code change the Amount-field of my form? What kind of field should it be then?

You need a text input with the ID set to Amount.

If you have more problems then you will need to debug the JavaScript + HTML.

Bob

I still don't see anything happen, this is the html-code:

<div class="ccms_form_element cfdiv_radio" id=Member style=""><label>Member *</label><input type="hidden" name="Member" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="Member" id="Member_0" title="" value="No" />
<label for="Member_0">Neen</label>
<input type="radio" name="Member" id="Member_1" title="" value="Yes" />
<label for="Member_1">Ja</label>
</div><div class="clear"></div><div id="error-message-Member"></div></div>

<div class="ccms_form_element cfdiv_text" id="Choise1" style=""><label>Choise1 *</label><input maxlength="150" size="30" class=" validate['required','number']" title="" type="text" container_id="0" value="0" name="Choise1" />

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

<div class="ccms_form_element cfdiv_text" id="Choise2" style=""><label>Choise2 *</label><input maxlength="150" size="30" class=" validate['required','number']" title="" type="text" container_id="0" value="0" name="Choise2" />
<div class="clear"></div><div id="error-message-Choise2"></div></div>

<div class="ccms_form_element cfdiv_text" id="Amount" style=""><label>Amount </label><input maxlength="150" size="30" class=" validate['alphanum']" title="" type="text" container_id="0" value="" name="Amount" />

There was an auto_id instead of id="Amount" (also for Choise1, Choise2 and Member)
I changed Member back to

      if ( $('Lid') == true) {

How can I debug the JavaScript + HTML?

Hi pokemon,

if ( $('Lid') == true) {

You cannot change code at random and expect it to work !!!!

You also cannot expect me to debug your random changes. Find a good JavaScript tutorial and work through the basics, then look at the code line by line so that you understand what is happening.

Bob

if ( $('Lid') == true) {

I am sorry, this should have been 'Member'. (I only changed the names in English to make it read more easily)

Is debugging something I have to switch on in Chronoforms or joomla?

Hi pokemon,

Even if you replace 'Lid' with 'Member' the result is still bad code :-(

Debugging is the process of going through your code line by line to work out exactly what is happening and what isn't working and then fixing it.

Bob