Realtime Math in a Form V4

hf

hfth 03 Feb, 2012

Hi there,

I'm beginner. I did a form with the 3 pdf delivered on chronoform. Now I need real-time addition before submitting.
Exemple_

Name
Country

Price1: 10
Price2: 11

Total: result and only after I submit to DB

I tried in HTML and the real-time works fine but can not use it in chronoform V4 or don't know how to integrate

<html>
<head>
<script language="JavaScript">
function affich_total(i)
{
document.formu.elements['fr'].value=Math.round(Number(document.formu.elements['aaa'].value) + (Number(document.formu.elements['bbb'].value) + (Number(document.formu.elements['ccc'].value))));
}
</script>
</head>
<body>
<form name="formu">
<input type="number" size="5" name="aaa" id="aaa" onkeyup="affich_total(this.value)"></input>  <=>  
<input type="number" size="5" name="bbb" id="bbb" onkeyup="affich_total(this.value)"></input>  <=>  
<input type="number" size="5" name="ccc" id="ccc" onkeyup="affich_total(this.value)"></input>  <=>  
<input type="number" size="5" name="fr" id="fr" </input> <br>

</form>
</body>
</html>

Thanks
HFT

Gr

GreyHead 06 Feb, 2012

Hi hfth,

Please see this post which is almost identical to your question.

Bob

hf

hfth 06 Feb, 2012

Yes have seen it and tried but I probably do something wrong. It doesn't work or its not realtime.

regards

Gr

GreyHead 06 Feb, 2012

Hi hfth,

So, what is the code that you have tried?

Bob

hf

hfth 06 Feb, 2012

[attachment=0]print01.png[/attachment]

Dynamic files : yes

function rekenen1(){
var box1=document.myform.Dette_orig.value;
var box2=document.myform.fraisrap01.value;
var box3=box1*4+box2*6;
document.myform.Bedrag.value=total01;
}

Gr

GreyHead 06 Feb, 2012

Hi hfth,

Please use the code in my reply - not the code that doesn't work. And you will need to change the code to match the elements in your form.

Bob

hf

hfth 06 Feb, 2012

I tried without result

window.addEvent('domready', function() {
$('Dette.orig').addEvent('change', rekenen1);
$('fraisrap01').addEvent('change', rekenen1);
});
function rekenen1(){
$('total01').value = $('Dette.orig').value * 4 + $('fraisrap01').value * 6;
}

Gr

GreyHead 06 Feb, 2012

Hi hfth,

I'm not sure that . is allowed in an ID.

Using your Form 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="fr" id="fr" />

and putting those ids into my code example

window.addEvent('domready', function() {
  $('aaa').addEvent('change', rekenen1);
  $('bbb').addEvent('change', rekenen1);
});
function rekenen1(){
  $('fr').value = $('aaa').value * 4 + $('bbb').value * 6;
}

The calculation appears to work correctly

Bob

hf

hfth 06 Feb, 2012

ooops its a typing error should be underscore but doesn't work realtime eather

Gr

GreyHead 06 Feb, 2012

Hi hfth,

It works OK once the JavaScript errors on the page are fixed.

Bob

hf

hfth 06 Feb, 2012

Yep looks very fine. I missed the last line.
Thank you very much. I just have to correct it to math operations LOL I found it on my other script so I will find here too LOL

Thanks again

Gotcha

window.addEvent('domready', function() {
$('Dette_orig').addEvent('change', rekenen1);
$('fraisrap01').addEvent('change', rekenen1);
});
function rekenen1(){
$('total01').value = Number($('Dette_orig').value) + Number($('fraisrap01').value);
}
function affich_total(){};

Gr

GreyHead 06 Feb, 2012

Hi hfth,

I added the last line to remove the errors cause because th function was used but not defined. It doesn't do anything useful.

Bob

hf

hfth 06 Feb, 2012

It seems is the onkeyup function which is defined in the form. affiche_total

The total works fine now but I'm trying to make also the second part. it works partial but its not as real time then it should, if you make changes. Only the first (left) part is ok. But I have probably to attack this in different way. Not taking total but redo completely the additions

hf

hfth 06 Feb, 2012

That's the final working code for the addition and the subtractions working in real-time


window.addEvent('domready', function() {
  $('Dette_orig').addEvent('change', affich_total);
  $('fraisrap01').addEvent('change', affich_total);
  $('frisrap02').addEvent('change', affich_total);
  $('fraisra03').addEvent('change', affich_total);
  $('interet').addEvent('change', affich_total);
  $('fraispours').addEvent('change', affich_total);

  $('somme_rem01').addEvent('change', affich_total);
  $('somme_rem02').addEvent('change', affich_total);
  $('somme_rem03').addEvent('change', affich_total);
  $('somme_rem04').addEvent('change', affich_total);
  $('somme_rem05').addEvent('change', affich_total);
  $('somme_rem06').addEvent('change', affich_total);
  $('remise').addEvent('change', affich_total);
});
function affich_total(){
  $('total01').value = Number($('Dette_orig').value) + Number($('fraisrap01').value) + Number($('frisrap02').value) + Number($('fraisra03').value) + Number($('interet').value) + Number($('fraispours').value);

  $('reste01').value = Number($('total01').value) - Number($('somme_rem01').value) - Number($('somme_rem02').value) - Number($('somme_rem03').value) - Number($('somme_rem04').value) - Number($('somme_rem05').value) - Number($('somme_rem06').value) - Number($('remise').value);
}
;

Thanks again

Now I attack sorted list (list by) LOL Would be funny

sl

slavonec 20 Mar, 2014

Hi hfth,

I'm not sure that . is allowed in an ID.

Using your Form 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="fr" id="fr" />

and putting those ids into my code example

window.addEvent('domready', function() {
  $('aaa').addEvent('change', rekenen1);
  $('bbb').addEvent('change', rekenen1);
});
function rekenen1(){
  $('fr').value = $('aaa').value * 4 + $('bbb').value * 6;
}

The calculation appears to work correctly

Bob

Hi Bob,

All works, but how can I round a number? If you have time, please take a look here e-bgpapers.com/tma/about-tma/join-tma, type 34 in "Number of Corporate Employees" and you will get "78.19999999999999"

Gr

GreyHead 26 Mar, 2014

Hi hfth,

The javaScript parseInt() function is probably the best way to handle this.

Bob

sl

slavonec 27 Mar, 2014

Thank you Bob,

I'm not that much into javascript.

Could you please, implement that function in your example above? Would greatly appreciate that.

Thank you in advance

Gr

GreyHead 27 Mar, 2014

HI slavonec,

Something like this

function rekenen1(){
  $('fr').value = $('aaa').value * 4 + $('bbb').value * 6;
  $('fr').value = parseInt($('fr').value);
}

Bob

sl

slavonec 27 Mar, 2014

Thank you so much