Calculate form multiple fields

Hi,

I have a form where people can calculate their calorie. eg.

step1. fill in your weight in Kg. for example 75kg
Then there must comes 6 results in 6 inputfields (disabled)
- Squash (weight * 12)
-Tennis (weight * 7)
- Soccer (weight * 7)
- Swimming (weight * 6)
- Jogging (weight * 6)
- Cycling (weight * 4)

This is what i have for now:

<script type="text/javascript"><!--
function updatesum() {
document.form.sumSquash.value = (document.form.sum1.value -0) * (document.form.sum2.value -0);
document.form.sumTennis.value = (document.form.sum1.value -0) * (document.form.sum3.value -0);
document.form.sumVoetbal.value = (document.form.sum1.value -0) * (document.form.sum4.value -0);
document.form.sumZwemmen.value = (document.form.sum1.value -0) * (document.form.sum5.value -0);
document.form.sumJoggen.value = (document.form.sum1.value -0) * (document.form.sum6.value -0);
document.form.sumFietsen.value = (document.form.sum1.value -0) * (document.form.sum7.value -0);
}

//--></script>

<p>Vul uw gewicht in om een indicatie te krijgen van de door u te verbranden calorieën.</p><p><input name="sum1" onChange="updatesum()"  style="width: 40px;"/> KG</p>

<input name="sum2" type="hidden" value="12" />
<input name="sum3" type="hidden" value="7" />
<input name="sum4" type="hidden" value="7" />
<input name="sum5" type="hidden" value="6" />
<input name="sum6" type="hidden" value="6" />
<input name="sum7" type="hidden" value="4" />
<table width="100%" border="0"  class="table table-bordered">
  <tr>
    <td>Sport</td>
    <td>calorieën per uur (tot)</td>
  </tr>
  <tr>
    <td>Squash</td>
    <td><input name="sumSquash" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Tennis</td>
    <td><input name="sumTennis" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Voetbal</td>
    <td><input name="sumVoetbal" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Zwemmen</td>
    <td><input name="sumZwemmen" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Joggen</td>
    <td><input name="sumJoggen" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Fietsen</td>
    <td><input name="sumFietsen" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
</table>

When testing local in a HTML page all went fine ... but how can I put this in CF?

Any help welcome!

Thanks all

Hi Mgingo,

I'd start by putting the HTML into a Custom Element element and the JavaScript into a Load JS action.

Bob

Hi Bob, I've done that allready😟 I'm not a genius with Javascripting ...

Hi Mgringo,

So, what errors are you getting? Have you checked your web browser JavaScript console?

Bob

Yes ... No errors in console😟

http://tsckardinge.nl/index.php?option=com_chronoforms&chronoform=calculator

Hi Mgingo,

Oh yes there are . . .

Uncaught TypeError: Cannot read property 'sumSquash' of undefined
index.php?option=com_chronoforms&chronoform=calculator : 38 updatesum 
index.php?option=com_chronoforms&chronoform=calculator : 38 onchange

Bob

mm okay , i've changed some things .. this is what it is now:

in load JS:

jQuery.noConflict();

$(document).ready(function($){
	
	$('#cal_input').bind("propertychange keyup input paste", function(e){
		var cal = $('#cal_input').val();
		render(cal);
	});
	
	function render(cal){
		var squash_sum = 12;
		var squash_result = cal * squash_sum;
		$('#squash_result').val(squash_result);
		
		var tennis_sum = 7;
		var tennis_result = cal * tennis_sum;
		$('#tennis_result').val(tennis_result);
		
		var voetbal_sum = 7;
		var voetbal_result = cal * voetbal_sum;
		$('#voetbal_result').val(voetbal_result);
		
		var zwemmen_sum = 6;
		var zwemmen_result = cal * zwemmen_sum;
		$('#zwemmen_result').val(zwemmen_result);
		
		var joggen_sum = 6;
		var joggen_result = cal * joggen_sum;
		$('#joggen_result').val(joggen_result);
		
		var fietsen_sum = 4;
		var fietsen_result = cal * fietsen_sum;
		$('#fietsen_result').val(fietsen_result);
	}
	
});

In custom HTML:

<p>Vul uw gewicht in om een indicatie te krijgen van de door u te verbranden calorieën.</p>

<p><input id="cal_input" style="width: 40px;" maxlength=5 /> KG</p>
<table width="100%" border="0"  class="table table-bordered">
  <tr>
    <td>Sport</td>
    <td>calorieën per uur (tot)</td>
  </tr>
  <tr>
    <td>Squash</td>
    <td><input id="squash_result" readonly style="border:0px;" style="width: 20px;"></td> <!-- name="sumSquash" -->
  </tr>
  <tr>
    <td>Tennis</td>
    <td><input id="tennis_result" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Voetbal</td>
    <td><input id="voetbal_result" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Zwemmen</td>
    <td><input id="zwemmen_result" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Joggen</td>
    <td><input id="joggen_result" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
  <tr>
    <td>Fietsen</td>
    <td><input id="fietsen_result" readonly style="border:0px;" style="width: 20px;"></td>
  </tr>
</table>
<div class="control-group">

  <div class="controls">
    <button id="send" name="send" class="btn btn-primary">Verstuur</button>
  </div>
</div>

What do i wrong?