problem with javascript to update fields in the Detail page

[jacky]

I am a new Caspio user. I have tried to work on Search and Report Wizard - Configure Details Page Fields. 

I need to do some edit and calculations on several fields on the details page.  I guess i must use javascript to achieve that. I have 3 fields lab_fee, c_discount, and credit_charge of Number  Data type in my table.

My requirement are as follows:

1. The user must be able to edit  lab_fee

2. When lab_fee is edited it should effect  TotalFee automatically. 

3. I put the javascript in the Footer like below.  Right now when I tested (preview) it, it did not do anything at all. I have been searching for similar problems on the community forums for weeks now and nearly give up. i found some similar issues  and i have tried to follow those  but so for not fortunate enough.  I look at the  Caspio Online help Center  topics "Why JavaScript is not working with multiple DataPages deployed on one page?" and I suspected that I might be in this situation. I currently deploy 3 Datapages on my website, and the one i am talking about is one of those three.  The other 2 Datapages are working ok.  Can anyone be kind enough to help me solve this issue.   . The JavaScript syntax such as document.getElementById(“caspioform”) and  document.forms[X]. drive me nut for a long while. 

4.  I have other calculations to perform as well, but for simplicity I only brought up this one.  

5. I try to avoid coding by focusing on using Wizards as many as i can. Search and Report Wizard is the one i used for this case. But it seemed that what i try to achieve has to be done by javascript only.   

Thank you very much guys. 

<SCRIPT LANGUAGE="JavaScript">
 
function calculate1()
{
var v1 = document.getElementById("EditRecordlab_fee").value;
var v2 = document.getElementById("EditRecordc_discount").value;
var v3 = document.getElementById("EditRecordcredit_charge").value;
var v4 =  v2 + v3 - v1;

document.getElementById("EditRecordTotalFee").value = Round(v4,2);
 }
 
document.getElementById("caspioform").onsubmit =calculate1;

</SCRIPT> 

Edited October 3, 2018 by jacky
i explained it wrongly about my data fields.

[Vitalikssssss]

Hi @jacky,

Please note that "onsubmit" Javascript event is not supported by Caspio after 13.0 Caspio Bridge release. 

Replace the onsubmit event with Caspio’s built-in event handler, as shown below:

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function (event) {
// do something
});
</script>

You can check this article for more information:

https://howto.caspio.com/release-notes/caspio-bridge-13-0/13-0-impacted-areas/

Also, make sure that you place your code in Datapage Footer.

 

Regards,

vitalikssssss

[jacky]

Thanks vitalikssssss, i will try, 

 

[jacky]

Hey vitalikssssss.

Sorry to bother you brother. Is this correct? 

 

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function (event) {

var v1 = document.getElementById("EditRecordlab_fee").value;
var v2 = document.getElementById("EditRecordc_discount").value;
var v3 = document.getElementById("EditRecordcredit_charge").value;
var v4 =  v2 + v3 - v1;

document.getElementById("EditRecordTotalFee").value = Round(v4,2);

};
</script>

[Vitalikssssss]

Hi @jacky,

I have found a small syntax error in your code. One closing bracket was missing.

Please try this code:

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function (event) {


var v1 = document.getElementById("EditRecordlab_fee").value;
var v2 = document.getElementById("EditRecordc_discount").value;
var v3 = document.getElementById("EditRecordcredit_charge").value;
var v4 =  v2 + v3 - v1;

document.getElementById("EditRecordTotalFee").value = Round(v4,2);

});
</script>

If it doesn`t help please inform me which form elements for each field you are using (lab_fee, c_discount, credit_charge).

Regards,

vitalikssssss

[jacky]

Hi vitalikssssss, thanks very much for your time. 

in the Search and Report Wizard - Configure Details Page Fields... I use Text Field  as the form elements for lab_fee, c_disco unt, and credit_charge . 

Thanks, 

[Vitalikssssss]

The issue was in Round function which actually accepts only one parameter and rounds the number to the nearest integer.  

The correct script should look like following:

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function (event) {


var v1 = document.getElementById("EditRecordlab_fee").value;
var v2 = document.getElementById("EditRecordc_discount").value;
var v3 = document.getElementById("EditRecordcredit_charge").value;
var v4 =  v2 + v3 - v1;

document.getElementById("EditRecordTotalFee").value = Math.round(v4 * 100) / 100;

});
</script>