jacky Posted October 3, 2018 Report Share Posted October 3, 2018 (edited) 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. Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted October 3, 2018 Report Share Posted October 3, 2018 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 Quote Link to comment Share on other sites More sharing options...
jacky Posted October 4, 2018 Author Report Share Posted October 4, 2018 Thanks vitalikssssss, i will try, Quote Link to comment Share on other sites More sharing options...
jacky Posted October 5, 2018 Author Report Share Posted October 5, 2018 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> Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted October 8, 2018 Report Share Posted October 8, 2018 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 Quote Link to comment Share on other sites More sharing options...
jacky Posted October 8, 2018 Author Report Share Posted October 8, 2018 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, Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted October 10, 2018 Report Share Posted October 10, 2018 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> Quote Link to comment Share on other sites More sharing options...
chthorne Posted March 21 Report Share Posted March 21 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. Quote Link to comment Share on other sites More sharing options...
CoopperBackpack Posted March 22 Report Share Posted March 22 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: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.