Forums

Calculate something inside a form

FenFire 16 Aug, 2014
Hello,
this might be a bigger issue.
I want to implement a calculator in a view form (other field are set to readonly). The view form is a detail view that can be shown by clicking the link in a Chronoconnectivity List. The calculator in the fourth tab looks like this:
[attachment=0]Calculator.png[/attachment]

My target is that users who put in some numbers in the two upper field and press the button (type: button), get a calculated result written in the third readonly field. (If this is not possible, a message box would also be okay. But the user should stay on the same site.) For the calculation I need the two user inputs and four fields (Data[km_standard], Data[km_long], Date[time_standard], Data[time_long]).

I tried to add a "On button" action to try, but nothing happens. Moreover, I'm not sure how to access the fields in PHP Custom Code and how to add a value to the third field a display it.

Can you help me? Thanks in advance!
GreyHead 17 Aug, 2014
Hi FenFire,

I would do this using JavaScript in the form. There are some examples in the forums here.

You don't need the button, you can set up the JavaScript so that the total is calculated when either of the two inputs change.

Bob

PS You could also do it with PHP and submitting the form but that is a long way round. You should check any browser-side JavaScript calculations with PHP after the form is submitted though as a part of your submission validation process.
FenFire 17 Aug, 2014
Hello Max,

I got quite into this (as I'm a newbie to Java) now and spent at least an hour for it - still it doesn't work in Chronoforms.

At first I tried the script in test.php-file with simple input field. I called the form "cc" and used var form = this.cc so I could get the value with eg. form.time_est.value. It worked perfectly well.
Now I tried this syntax and $('time_est') in Chronoforms, but nothing happens.
I put the following code in a "Load JavaScript" action on load and added onchange=calculate() to the params boxes of the two fields mentioned above. What is wrong?

function calculate () {
	var price, time_rest, km_rest;
	if ($('time_est').value > 10) {
		time_rest = $('time_est').value - 10;
		price = 10 * $('time_standard').value + time_rest * $('time_long').value;
	}
	else {
		price = $('time_est').value * $('time_standard').value;
	}
	if ($('km_est').value > 100) {
		km_rest = $('km_est').value - 100;
		price += 100 * $('km_standard').value + km_rest * $('km_long').value;
	}
	else {
		price += $('km_est').value * $('km_standard').value;
	}
	$('cost_est').value =  price;
}
Max_admin 19 Aug, 2014
This is v5 and so you should use jQuery, you should reference elements objects like this:
$("#field_id") OR BETTER: jQuery("#field_id")


Regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
FenFire 25 Aug, 2014
Answer
Here's a possible solution, if someone's interested:

function calculate () {
tst = parseInt(jQuery("[name='Data[time_standard]']").val());
tlong = parseInt(jQuery("[name='Data[time_long]']").val());
kmst = parseInt(jQuery("[name='Data[km_standard]']").val());
kmlong = parseInt(jQuery("[name='Data[km_long]']").val());
t_e = parseInt(jQuery("[name='time_est']").val());
km_e = parseInt(jQuery("[name='km_est']").val());
if (tlong == 0) {
tlong = tst;
}
if (kmlong == 0) {
kmlong = kmst;
}
price=0
if (t_e > 10) {
	time_rest = t_e - 10;
	price += 10 * tst + time_rest * tlong;
}
else {
	price += t_e * tst;
}
if (km_e > 100) {
	km_rest = km_e - 100;
	price += (100 * kmst + km_rest * kmlong)/100;
}
else {
	price += (km_e * kmst)/100;
}
jQuery("[name='cost_est']").val(price);

}


Regards,
Christian
This topic is locked and no more replies can be posted.