Jump to content

problem with javascript to update fields in the Detail page


Recommended Posts

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 by jacky
i explained it wrongly about my data fields.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

  • 5 years later...

Hi @Vitalikssssss, Is this feature no longer supported? I added these exact fields to my database and built a Submission Form with these fields and copied the code above into the footer but when I type values in the three fields: lab_fee, c_discount, and credit_charge the TotalFee field doesn't get updated in the form or in the database.

I tried doing it both as a Submission Form and as a Single Record Update but it doesn't work on either.

2024-03-21.png

Link to comment
Share on other sites

Hello @chthorne,

I am not sure why you use JavaScript to make this calculation.

The script looks correct except for one point. 

Getting a value from the field returns a string and not a number: document.getElementById("EditRecordlab_fee").value

So, it is required to convert the values to numbers to be able to apply mathematical calculations. I added the pasreFloat() function to the code.

Also, please note that the fields on the Submission form have the syntax 'InsertRecordFEILDNAME', and on the Single Record Update or Details page - 'EditRecordFEILDNAME'.

This is a code example for the  Single Record Update or Details page:

<script>

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

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

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

});
</script>

Though you may check if the Calculated Value can work instead of the JavaScript:

TS1Ypw5.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...