Calculation script problem.

Just wondering if I could get a hand.

I've found this code that I want to use in my form:



When I run it by itself it works.

When I put it into chronoforms I get the error message saying that "myform" is undefined.

I put this into the HTML code:

<form name="myform">

  <h2>Input Fields</h2>
  <input onKeyPress="calculate('total');" onBlur="calculate('total');" class="special_value" 
type="text" name="price"> <Br/>
  <input onKeyPress="calculate('total');" onBlur="calculate('total');" class="special_value" 
type="text" name="price2"> <Br/>
  <input onKeyPress="calculate('total');" onBlur="calculate('total');" class="special_value" 
type="text" name="price4"> <Br/><Br/>
  
  <h2>Radio Button</h2>
  <input onClick="calculate('total');" name="price111" 
type="radio" value="100" class="special_value">100<br>
  <input onClick="calculate('total');" name="price111" 
type="radio" value="200" class="special_value">200<br>
  <input onClick="calculate('total');" name="price111" 
type="radio" value="300" class="special_value">300<br>
  <input onClick="calculate('total');" name="price111" 
type="radio" value="400" class="special_value">400<br><br>
  
  <h2>Checkboxes</h2>
  <input onClick="calculate('total');" name="price112" 
type="checkbox" value="400" class="special_value">400<br>
  <input onClick="calculate('total');" name="price112" 
type="checkbox" value="600" class="special_value">600<br>
  <input onClick="calculate('total');" name="price112" 
type="checkbox" value="700" class="special_value">700<br>
  <input onClick="calculate('total');" name="price112" 
type="checkbox" value="900" class="special_value">900<br><br>
  
  <h2>Drop Down Menu</h2>
  <select onChange="calculate('total');" name="price5" class="special_value">
    <option value="0"></option>
    <option value="900">9k</option>
    <option value="500">5k</option>
    <option value="400">4k</option>
  </select>
  
  <br /><br /><br />
  <div id="total"></div>
  
  <input onClick="calculate('total');" type="button" name="button" value="re-calculate">

</form>

And this into the Javascript Code:

[code] calculate = function(totalElement)
{
if (totalElement)
{
var calculation = '';
var overall = '';
var fields = new Array();
var theElement = document.getElementById(totalElement);
var userInputs = myform.elements;
var the_type = '';
for (var f = 0; f < userInputs.length; f++)
{
if (userInputs[f].className=='special_value')
{
if (userInputs[f].type=='select-one')
{
if(userInputs[f].options[userInputs[f].selectedIndex].value)

{
fields[f] = userInputs[f].options[userInputs[f].selectedIndex].value;
}
else
{
fields[f] = 0;
}
}
else if(userInputs[f].type=='radio' ||
userInputs[f].type=='checkbox')
{
if (userInputs[f].checked)
{
fields[f] = userInputs[f].value;
}
else
{
fields[f] = 0;
}
}
else
{
if (userInputs[f].value)
{
fields[f] = userInputs[f].value;
}
else
{
fields[f] = 0;
}
}
}
}

for (var i=0; i<fields.length; i++)
{
calculation += fields[i];

if (i!=fields.length-1)
{
calculation += '+';
}
}

if (calculation!='')
{
overall = eval(calculation).toFixed(2);
}

if (overall!='')
{
theElement.innerHTML = '

Here is the original file.

[file name=index.zip size=1709]http://www.chronoengine.com/images/fbfiles/files/index.zip[/file]

Hi Checkmate,

That's probalby because ChronoForms changes the form name. If the form is called 'myform' then JavaScript will see it as 'chronocontact_myform'.

Bob

Thanks for the reply Bob.

Is there a way to fix/get around this? I tried changing the form name to 'chronocontact_myform' but I just get the error saying 'chronocontact_myform' is undefined.

Thanks

Hi chekmate,

Remove the Form tags from your form HTML, sorry I should have spotted those earlier. ChronoForms will create new form tags.

In your JavaScript replace 'myform' with 'chronocontact_myform'.

Bob

Thanks for the quick reply.

My HTML now looks like this:

 <h2>Input Fields</h2>
  <input onKeyPress="calculate('total');" onBlur="calculate('total');" class="special_value" type="text" name="price"> <Br/>
  <input onKeyPress="calculate('total');" onBlur="calculate('total');" class="special_value" type="text" name="price2"> <Br/>
  <input onKeyPress="calculate('total');" onBlur="calculate('total');" class="special_value" type="text" name="price4"> <Br/><Br/>
  
  <h2>Radio Button</h2>
  <input onClick="calculate('total');" name="price111" type="radio" value="100" class="special_value">100<br>
  <input onClick="calculate('total');" name="price111" type="radio" value="200" class="special_value">200<br>
  <input onClick="calculate('total');" name="price111" type="radio" value="300" class="special_value">300<br>
  <input onClick="calculate('total');" name="price111" type="radio" value="400" class="special_value">400<br><br>
  
  <h2>Checkboxes</h2>
  <input onClick="calculate('total');" name="price112" type="checkbox" value="400" class="special_value">400<br>
  <input onClick="calculate('total');" name="price112" type="checkbox" value="600" class="special_value">600<br>
  <input onClick="calculate('total');" name="price112" type="checkbox" value="700" class="special_value">700<br>
  <input onClick="calculate('total');" name="price112" type="checkbox" value="900" class="special_value">900<br><br>
  
  <h2>Drop Down Menu</h2>
  <select onChange="calculate('total');" name="price5" class="special_value">
    <option value="0"></option>
    <option value="900">9k</option>
    <option value="500">5k</option>
    <option value="400">4k</option>
  </select>
  
  <br /><br /><br />
  <div id="total"></div>
  
  <input onClick="calculate('total');" type="button" name="button" value="re-calculate">

And my Javascript like this:

[code] calculate = function(totalElement)
{
if (totalElement)
{
var calculation = '';
var overall = '';
var fields = new Array();
var theElement = document.getElementById(totalElement);
var userInputs = chronocontact_myform.elements;
var the_type = '';
for (var f = 0; f < userInputs.length; f++)
{
if (userInputs[f].className=='special_value')
{
if (userInputs[f].type=='select-one')
{
if(userInputs[f].options[userInputs[f].selectedIndex].value)
{
fields[f] = userInputs[f].options[userInputs[f].selectedIndex].value;
}
else
{
fields[f] = 0;
}
}
else if(userInputs[f].type=='radio' || userInputs[f].type=='checkbox')
{
if (userInputs[f].checked)
{
fields[f] = userInputs[f].value;
}
else
{
fields[f] = 0;
}
}
else
{
if (userInputs[f].value)
{
fields[f] = userInputs[f].value;
}
else
{
fields[f] = 0;
}
}
}
}

for (var i=0; i<fields.length; i++)
{
calculation += fields[i];

if (i!=fields.length-1)
{
calculation += '+';
}
}

if (calculation!='')
{
overall = eval(calculation).toFixed(2);
}

if (overall!='')
{
theElement.innerHTML = '

I was reading your post on Javascript validation problems... would this be a similar issue?

Hi Checkmate,

That all looks OK.

So what is the name of your form? Is it called 'myform' or something different?

Bob

Yes I did name the form myform. At first I didnt have it named that but when you told me Chronoforms assigns its own form names I changed the form name to myform.

I can PM you a login account so you can take a look if you think that would help.

Just really close on this and its perfect for what I need.

Thanks,

Hi checkmate,

Sorry for the confusion. Whatever form name you put in the General tab, ChronoForms will prefix with 'chronocontact_' in the web page. The longer version is what the browser sees, and hence the JavaScript uses.

By all means email a login to the address in my sig and I'll take a look.

Bob

Email Sent.

Any luck? Or do I need to start looking for another option?

Thanks for your time,

M8

Hi Checkmate,

a small typo , change it from : chronocontact_myform to ChronoContact_myform

Cheers

Max

Hi Checkmate,

It's been night-time here - and I was asleep!

Max is right about my typo, it should have the capitals. And there were some other things that needed fixing.[list]

The Javascript actually needed 'document.ChronoContact_myform'

You didn't have any field for the result so I've added that

[/list]The form is now working - though there seems to be a problem with the text input fields which are doing something strange with the decimal place.

Bob

Hi Bob,

I'm trying to duplicate this script to learn how to enable some simple calculation on my form as well (checkbox mainly). However I am not able to make the script functional.

Following your instruction i added

var userInputs = document.ChronoContact_myform.elements;

in the javascript.

For the result field, there is

<div id="total"></div>

Is there anything else that needs to be added? like in onsubmitcode field and such?

Thanks,
William

Hey D3vilr3d,

Once I did get the script working I ran into another problem that I didn't want to bother getting worked out.

If you add any additional fields besides the fields that are being auto calculated it breaks the script.

So if you add a field for say... a name. the script breaks. I emailed the script writer but he never got back to me and I found a different way of doing it but it doesnt include the use of checkboxes like you mentioned in your post...:blush:

If you get it working I'd love to know what you did.

Hello,

This is how I ended up making mine.

Form name: F2

Javascript:

function TotalCheckedValues() {
var total = 0;
if(document.ChronoContact_F2.item1.checked == true) { total += parseFloat(document.ChronoContact_F2.item1.value); }
if(document.ChronoContact_F2.item2.checked == true) { total += parseFloat(document.ChronoContact_F2.item2.value); }
if(document.ChronoContact_F2.item3.checked == true) { total += parseFloat(document.ChronoContact_F2.item3.value); }
if(document.ChronoContact_F2.item4.checked == true) { total += parseFloat(document.ChronoContact_F2.item4.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.ChronoContact_F2.T.value = ts;
}

Form Code:

<input type="checkbox" onclick="TotalCheckedValues()"  name="item1" value="2.00">
<input type="checkbox" onclick="TotalCheckedValues()"  name="item2" value="2.00">
<input type="checkbox" onclick="TotalCheckedValues()"  name="item3" value="2.00">
<input type="checkbox" onclick="TotalCheckedValues()"  name="item4" value="2.00">

<input type="text" style="width:270px" onChange="Reim()" readonly="" name="T"/>

any time the check box is check, the input box will show the value that is declared in the checkbox input.

I have other fields on the form, like name and address, but the script does not look for those field.

anyone cared to improve my javascript, maybe use a "general catch all class and check if that is checked" instead making one for each checkbox?