Newbie Help - Java Auto Update Fields

Hi,

I have a Order Form I want to setup inside my Joomla Site and ChronoForms seems they way to go. I have some valid HTML with Java in it which works, but I am having trouble getting the form to auto calculate on change when in the ChronoForm.

This is what I have extrapolated so far from the working form:

Form Name: TEST_1

HTML Code:

<p>Please tell us who you are (<font color="#FF0000">red</font> denotes required information):</p>
<table border="0" cellpadding="0" width="550" id="table1">
<tr>
<td width="340" align="right"><font color="#FF0000">Name</font></td>
<td width="10"> </td>
<td width="200"><input type="text" name="Name" size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right"><font color="#FF0000">Email</font>
(Your confirmation will be sent here): </td>
<td width="10"> </td>
<td width="200"><input type="text" name="Email" size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Other Contact Info:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="OtherInfo" size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right"> </td>
<td width="10"> </td>
<td width="200"> </td>
</tr>
</table>
<p>And tell us what you would like:</p>
<table border="0" cellpadding="0" width="550" id="table2">
<tr>
<td width="250" height="31"><b>Item Description</b></td>
<td align="center" width="100" height="31"><b>Quantity</b></td>
<td align="right" height="31" width="60"><b>Price </b></td>
<td align="right" height="31" width="140"><b>Total</b></td>
</tr>
<tr>
<td width="250">Class "A" Widgets</td>
<td align="center" width="100">
<input type="text" name="qtyA" size="5" tabindex="5" onChange="calculate()"></td>
<td align="right" width="60">12</td>
<td align="right" width="140">
<input type="text" name="totalA" size="12" tabindex="99" onChange="calculate()"></td>
</tr>
<tr>
<td width="250">Class "B" Widgets</td>
<td align="center" width="100">
<input type="text" name="qtyB" size="5" tabindex="5" onChange="calculate()"></td>
<td align="right" width="60">13</td>
<td align="right" width="140">
<input type="text" name="totalB" size="12" tabindex="99" onChange="calculate()"></td>
</tr>
<tr>
<td width="250">Class "C" Widgets</td>
<td align="center" width="100">
<input type="text" name="qtyC" size="5" tabindex="5" onChange="calculate()"></td>
<td align="right" width="60">14</td>
<td align="right" width="140">
<input type="text" name="totalC" size="12" tabindex="99" onChange="calculate()"></td>
</tr>
<tr>
<td width="250"> </td>
<td align="center" width="100"> </td>
<td align="right" width="60"> </td>
<td align="right" width="140"> </td>
</tr>
<tr>
<td width="250">
<p align="right"><b>TOTALS:</b></td>
<td align="center" width="100"> </td>
<td align="right" width="60"> </td>
<td align="right" width="140">
<input type="text" name="GrandTotal" size="15" tabindex="99" onChange="calculate()"></td>
</tr>
<td width="250"> </td>
<td align="center" width="100"> </td>
<td align="right" width="60"> </td>
<td align="right" width="140"> </td>
</tr>
</table>
<p> </p>
<table border="0" cellpadding="0" width="550" id="table3">
<tr>
<td width="563">
<p align="center">
<input type="submit" value="Submit" name="subButton" tabindex="50">    
<input type="reset" value="Reset" name="resetButton" tabindex="50"></td>
</tr>
</table>

Java Code:

var form =  ChronoContact.TEST_1;

function dm(amount) 
{
  string = "" + amount;
  dec = string.length - string.indexOf('.');
  if (string.indexOf('.') == -1)
  return string + '.00';
  if (dec == 1)
  return string + '00';
  if (dec == 2)
  return string + '0';
  if (dec > 3)
  return string.substring(0,string.length-dec+3);
  return string;
}



function calculate()
{

  QtyA = 0;  QtyB = 0;  QtyC = 0;
  TotA = 0;  TotB = 0;  TotC = 0;

  PrcA = 12; PrcB = 13; PrcC = 14;

 
 
  if (document.form.qtyA.value > "")
     { QtyA = document.form.qtyA.value };
  document.form.qtyA.value = eval(QtyA);  
 
  if (document.form.qtyB.value > "")
     { QtyB = document.form.qtyB.value };
  document.form.qtyB.value = eval(QtyB);  
 
  if (document.form.qtyC.value > "")
     { QtyC = document.form.qtyC.value };
  document.form.qtyC.value = eval(QtyC);
 
 
  TotA = QtyA * PrcA;
  document.form.totalA.value = dm(eval(TotA));
 
  TotB = QtyB * PrcB;
  document.form.totalB.value = dm(eval(TotB));
 
  TotC = QtyC * PrcC;
  document.form.totalC.value = dm(eval(TotC));
 
 
  Totamt = 
     eval(TotA) +
     eval(TotB) +
     eval(TotC) ;
    
  document.form.GrandTotal.value = dm(eval(Totamt));
  
} 

I have modified this from a textbook exercise as I want to develop this a bit more with a few more rows to the calculation, which I can do when this works.

Many Thanks for your help.

Hi rainbowjammer,

You hadn't carried the form name through to the remaining JavaScript fields, and it had a '.' instead of a '_'. Here's a modified version of your script which should be simpler to extend. Note that I added ids to your input fields alongside the names as JavaScript picks these up more easily.

Here's the calculation part of the form html

<p>And tell us what you would like:</p>
<table border="0" cellpadding="0" width="550" id="table2">
    <tr>
        <td width="250" height="31"><b>Item Description</b></td>
        <td align="center" width="100" height="31"><b>Quantity</b></td>
        <td align="right" height="31" width="60"><b>Price </b></td>
        <td align="right" height="31" width="140"><b>Total</b></td>
    </tr>
    <tr>
        <td width="250">Class "A" Widgets</td>
        <td align="center" width="100">
            <input type="text" name="qtyA" id="qtyA" size="5" tabindex="5" onChange="calculate()"></td>
        <td align="right" width="60">12</td>
        <td align="right" width="140">
            <input type="text" name="totalA" id="totalA" size="12" tabindex="99" onChange="calculate()"></td>
    </tr>
    <tr>
        <td>Class "B" Widgets</td>
        <td align="center">
            <input type="text" name="qtyB" id="qtyB" size="5" tabindex="5" onChange="calculate()"></td>
        <td align="right">13</td>
        <td align="right">
            <input type="text" name="totalB" id="totalB" size="12" tabindex="99" onChange="calculate()"></td>
    </tr>
    <tr>
        <td>Class "C" Widgets</td>
        <td align="center">
            <input type="text" name="qtyC" id="qtyC" size="5" tabindex="5" onChange="calculate()"></td>
        <td align="right">14</td>
        <td align="right">
            <input type="text" name="totalC" id="totalC" size="12" tabindex="99" onChange="calculate()"></td>
    </tr>
    <tr>
        <td> </td>
        <td align="center"> </td>
        <td align="right"> </td>
        <td align="right"> </td>
    </tr>
    <tr>
        <td>
            <p align="right"><b>TOTALS:</b></td>
        <td align="center"> </td>
        <td align="right"> </td>
        <td align="right">
            <input type="text" name="GrandTotal" id="GrandTotal" size="15" tabindex="99" onChange="calculate()"></td>
    </tr>
        <td> </td>
        <td align="center"> </td>
        <td align="right"> </td>
        <td align="right"> </td>
    </tr>
</table>
<p> </p>
<table border="0" cellpadding="0" width="550" id="table3">
    <tr>
        <td width="563">
            <p align="center">
                <input type="submit" value="Submit" name="subButton" tabindex="50">    
                <input type="reset" value="Reset" name="resetButton" tabindex="50">
            </p>
        </td>
    </tr>
</table>

and here's the JavaScript

function calculate()
{
    var price = new Array(12, 13, 14);
    var fields = new Array('A', 'B', 'C');
    var gTotal = value = 0;
    for ( var i = 0; i < fields.length; i++ ) {
        value = $('qty'+fields[i]).value * price[i];
        gTotal += value;
        $('total'+fields[i]).value = value.toFixed(2);
    }
    $('GrandTotal').value = gTotal.toFixed(2);
} 

To add more items, you can just add another element to the price and fields array and everything else will automatically adjust (though you still need to add the form html).

Bob

Many thanks, will give this a try.

Paul

Hi Bob,

I have replaced the code and read it carefully (just getting to grips with coding) and although I think I understand what is going on, the form still does not work.

Have a look at:

http://www.eloc.org.uk/index.php?option=com_chronocontact&chronoformname=TEST_1

Thanks again.

Hi rainbowjammer,

Ah . . . the MooTools library isn't being installed. Which versions of Joomla & ChronoForms are you using?

Bob

Hi,

Joomla 1.0.15

Latest Version of Chrono Forms, downloaded it yesturday.

Thanks for your time.

Hi rainbowjammer,

try to enable the validation in the validation tab and choose "mootools" as the library type!

Regards
Max

Fantastic, that did the trick.

Many Thanks.