Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Caspio Bridge
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL






  1. Hi, I have a submission form with an image field. I need to be able to use js to bypass the user having to use the Browse button to pull the image path for the image to be submitted (so I can streamline a process of uploading images- I've got a field with the image path mapped to Downloads folder and have a Virtual field using it as a data source. I just need to put that path in the image field so the user doesn't have to Browse to it). I set up test code using a button to trigger the js function so I could see if it was putting the image path (Virtual 1) into the image field for submission (ItemPic). When I run the code using the button I get an error message on the submission form: "Values cannot be submitted due to a data restriction." Does anyone know how to bypass that restriction, in the function I have below? <div style="text-align: center;"> <input class= "cb_custom_btn" type="button" onclick="myFunction()" value="Copy PicPath" /> <script> function myFunction(){ var picpath = document.getElementById("cbParamVirtual1").value; document.getElementById("InsertRecordItemPic").value = picpath; } </script> </div>
  2. Hello, I've been working with Caspio for a while now (Although I haven't done any real coding before), and I'm having trouble getting the coding right for something in a tabular report. I have a report with roughly twenty fields and thousands of records. I have a yes/no field that determines whether records have been reviewed by an employee (they toggle it themselves). I'm attempting to set it up to color code the records or even specific fields for that to make it easier to see if things have been dealt with or not. This is the link I found that seemed to have what I needed. I don't have any experience with Javascript so if I'm making an obvious mistake I'm unaware of it. https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/?_ga=2.268956409.901822134.1565024539-1632853601.1563754793 This is the code I've set up in an alternate HTML block based on the guide. We have an autonumber field 'Encounter_ID' and a yes/no for 'Needs_Review' [@field:Needs_Review^] <a id="visi[@field:Encounter_ID]"> <script> var isi = document.getElementById("visi[@field:Encounter_ID]"); if('[@field:Needs_Review]' == 'Yes'){ isi.parentNode.parentNode.style.backgroundColor = '#FF9999'; } else{ isi.parentNode.parentNode.style.backgroundColor = '#AAFAFA'; } </script> My issue is that when I input the code, it shows the entirety of it typed out without making any changes to the color. If anyone could explain what I'm doing wrong, or suggest an alternative way to accomplish this, please let me know. I would greatly appreciate it. Thanks in advance! - Ryan
  3. So I'm trying to get the value that is already in the current points field, do a calculation as depicted in the switch statement and then fill the field in again with the new number before submitting instantly. This is all supposed to be done as a way of replacing an SQL update statement. For some reason my EditRecord or document.getElementById doesn't seem to be working at all. <script LANGUAGE="Javascript"> function calculate(){ var pos = [@pos]; var points = [@field:CurrentPoints#]; switch(pos) { case 1: points += 10; break; case 2: points += 8; break; case 3: points += 6; break; case 4: points += 4; break; case -2: points += -2; break; default: points += 2; } document.getElementById("EditRecordCurrentPoints").innerHTML = points; } document.getElementById("mypage").onsubmit=calculate(); </script> There is already a <div id="mypage"> in the header and a </div> in the footer. Am I just being very stupid?
  4. I am using a submission form and trying to customize it. It's a simple script that displays a warning message and stops submission, if a user makes a certain combination of selections(i.e. selects ABC from a dropdown and XYZ is calculated in the Virtual field. However, the code does not seem to work. Could somebody take a look and let me know what I am doing wrong? The UseCaseType is a dropdown with a lookup table linked to it, and the Virtual Parameter is a Calculated Value SQL script(that does work). For some reason, a and b are populated as nulls. <script> document.addEventListener('BeforeFormSubmit', function (event) { var a = document.getElementById("InsertRecordUseCaseType").value; var b = document.getElementById("cbParamVirtual2").value; alert('a is ' + a + ' | b is ' + b); if (a == 'ABC' && b == 'XYZ') { alert('You cannot select ABC and XYZ together'); event.preventDefault(); } }); </script>
  5. I want to create a JS if statement that updates a fields value based on another fields value. If the field Virtual2 does not equal "Don't Share" I want the field CON_1 to equal Virtual2 Here is what I used unsuccessfully in the footer of a details page in a tabular report data page... <SCRIPT LANGUAGE="JavaScript"> function con1() { var v2 = parseFloat(document.getElementById("InsertRecordVirtual2").value); if(v2="Don't Share") {} else {document.getElementById("InsertRecordCON_1").value = (v2);} } document.getElementById("caspioform").onsubmit=con1; </SCRIPT> CON_1 is a text data type and Virtual2 is a virtual field drop down that on default = "Don't Share" Thanks Guys! Any help would be greatly appreciated!
  6. Hello! I am using a javascript code to change the values of some text fields everytime the user choose a value on a dropdown list at a submission form. This is the code: <SCRIPT LANGUAGE="JavaScript"> function atualizacampos() { var text1 = document.getElementById('InsertRecordEntidades_Canais_Info_1'); var text2 = document.getElementById('InsertRecordEntidades_Canais_Info_2'); var text3 = document.getElementById('InsertRecordEntidades_Canais_Info_3'); var text4 = document.getElementById('InsertRecordEntidades_Canais_Info_4'); var dropC = document.getElementById('InsertRecordEntidades_Canais_ID_Canal_Doacao'); var Cselecionado = dropC.options[dropC.selectedIndex].text; switch(Cselecionado) { case 'Depósito Bancário': text1.value='Agência' break; case 'Nota Fiscal': text1.value='Número da Nota'; break; case 'Paypal': text1.value='Código Paypal'; break; default: } } document.getElementById('InsertRecordEntidades_Canais_ID_Canal_Doacao').onchange=atualizacampos; </SCRIPT> This is already working, but right now i am trying to change also the labels of those text fields. I already tried some sibblings options, but it did not work. Can you guys please tell me the correct code to achieve that? So everytime a user change the dropdown value, the text1.value will be changed and also the label associated with this field will be changed for a new value. Can someone please help? My best regards, Shidartha
  7. Hello, I have been using the following code in the footer of a details data page. It previously worked to concatenate an autocompleted value from a virtual field with a text area field called "associatedSpecies." This is based on the javascript solution from Caspio below, but I'm not sure if this is no longer supported by more recent browsers? Does anyone have any insight on how I might make this work again? <SCRIPT LANGUAGE="JavaScript"> function concatenate() { var x0 = document.getElementsByName("EditRecordassociatedSpecies")[0].value; var x1 = document.getElementsByName("cbParamVirtual2")[0].value; if (x0 && x1) { document.getElementsByName("EditRecordassociatedSpecies")[0].value = x0+"; "+x1; } else { document.getElementsByName("EditRecordassociatedSpecies")[0].value = x0 + x1; } } document.getElementById("caspioform").onsubmit=concatenate; </SCRIPT>
  8. Hi I am stuck with javascript doing multiple calculations in same datapage. 1st javascript is calculation of unit cost, no of units and total (in local currency) 2nd javascript is convert local unit cost to USD based on cascading dropdown field 3rd javascript is using unit cost (in USD), no of units to derive total cost (in USD) the 1st javascript seems to be working. But when I add on 2nd javascript, only one value shows and in the wrong field. There is also no error appearing in the web console. Eg javascript 1 calculation = virtual field 1 = virtual field 1 value javascript 2 calculation = virtual field 2 = virtual field 2 value Instead what i see is this javascript 1 = virtual field 1 = virtual field 2 value javascript 2 = virtual field 2 = blank I followed basically this script and did my own modification http://forums.caspio.com/index.php?/topic/6053-perform-calculations-in-submission-form/ I think the problem is I did not define 2 variable that points to virtual field 1 and virtual field 2 respectively. var totalField = document.getElementsByClassName('cbFormData')[0]; I need 2 of it, and I do not how to define for the 2nd virtual field. Also, how do I pass the the virtual field to a table field? I used the Pass field value as parameter, it does not seem to write into the table. Can anyone please help? <script type="text/javascript"> // Caspio form elements to calculate local total cost var unitcostField = document.getElementById('InsertRecordLocalUnitCost'); var unitsField = document.getElementById('InsertRecordUnit'); // var totalField = document.getElementById("cbParamVirtual1"); ** I tried using this to point to virtual field but it did not work ** var totalField = document.getElementsByClassName('cbFormData')[0]; // Caspio form elements to convert local to USD cost var exchangerateField = document.getElementsByName("InsertRecordExchangeRate")[0]; //var convertField = document.getElementById("cbParamVirtual2"); ** I tried using this to point to virtual field but it did not work ** var convertField = document.getElementsByClassName('cbFormData')[0]; var caspioForm = document.getElementById('caspioform'); // Event handler var calculateTotal = function (event) { // TODO: Do something on value change --> totalField.innerHTML = unitcostField.value * unitsField.value; } var calculateExchangeRate = function (event) { // TODO: Do something on value change --> convertField.innerHTML = (1/exchangerateField.value) * unitcostField.value; } // Run total calculation on input to any of these two fields unitcostField.addEventListener('input', calculateTotal); unitsField.addEventListener('input', calculateTotal); unitsField.addEventListener('input', calculateExchangeRate); unitcostField.addEventListener('input', calculateExchangeRate); </script> Thanks in Advance
  9. Hi, I have a simply one that I just can not figure out. I know it's easy but I haven't been able to get this to work. I have a field where the user will enter a date. I want to take that date and add one, then insert into another field on a submission form. Field Name: End Date (user entered) = 10/23/2017 Field Name: Expire Date (calculated) = 10/24/2017 Any help would be appreciated.
  10. Want to display a different header according to value of field from user authentication. Code logic works fine, but the HTML I want to be executed does not work. Here's a sample script. The Italics part after the "if" statement works well on its own, but with the conditional code, it is ignored. Rules can't be used (I think) as they do not operate with Header or Footer blocks in a Data Page. <script> if("[@authfield:User_Company_Name]" == "ABC Ltd"){ Welcome [@authfield:User_Name] to your account &nbsp; <a href="https://www.myurl1/" target="_blank"><img alt="" src="https://myurl2.png" style="width: 50px; height: 10px; vertical-align: middle;" /></a>&nbsp;<a href="https://Myaccount.caspio.com/folderlogout">Logout</a> } Else{ Display an alternative header } </script> Many thanks for any help/advice you may be able to give!
  11. Hello, I have a Details datapage set up so when Update is clicked it goes to the next record. I need to figure out how to create a custom button (to put in either the Footer or an HTML block) to go to the Next Record (and a button for Previous, as well) so that the user can cycle through without clicking Update. The standard record navigation arrows at the bottom will not work for UI reasons (I need to make the custom 'Next Record' button relabeled and hidden in various scenarios). Does anyone know how to create a custom button for Next Record? As well, I also need to know how to hide that button (if it's in its own Section in an HTML block) when the Details form is at the 'last record' of the series (because there will be no 'Next Record' at that point). Any help would be greatly appreciated-
  12. I've been trying to add a month to a date for the use of recurring payments. The code I have to put in the HTML block I have placed below. And thats a code i got from someone else on this website but it doesn't not work. Please help. [@field:New_Date*] <SCRIPT LANGUAGE="JavaScript"> function setDate() { var New_Date = "first"; var Current_Date_1 = "second"; New_Date = "InsertRecord" + New_Date; Current_Date_1 = "InsertRecord" + Current_Date_1; var New_Date = document.getElementById(New_Date ).value; var New_Date = new Date(Date.parse(New_Date)); var result_Date = new Date (first_Date.setMonth(first_Date.getMonth()+1)); var d_month = result_Date.getMonth() + 1; if (d_month<10) {d_month = "0" + d_month;} var d_day = result_Date.getDate(); if (d_day<10) {d_day = "0" + d_day;} var d_year = result_Date.getFullYear(); var str_date = d_month + "/" + d_day + "/" + d_year; document.getElementById(Current_Date_1[@field:Current_Date_1*] ).value = str_date; } document.getElementById("caspioform").onsubmit=setDate; </SCRIPT>
  13. In my submission form, I wanted the value entered in one of my text fields to be automatically copied in my password and confirm password field. Does anyone have ideas about this? Thanks!
  14. I am looking to implement a simple validation on my form. I would like my user to not submit any numeric value in my submission form.
  15. Depending on what location is associated with a user(a column in the user table - the parameter), I would like to selectively hide a specific column in a report datapage. I am able to get Caspio to hide the column as desired on the preview Caspio page , but when deployed, Caspio seems to ALWAYS hide the column, regardless of the Country condition. Could you please take a look? This is where the datapage is deployed: https://dsmtest001.weebly.com/testjsreport.html. There are 2 user accounts-> 1. user1@test.com | 12341234 - Country is USA 2. user2@test.com | 12341234 - Country is Canada Column B should be hidden for the USA user but not the Canadian user. The selective functionality is achieved through the following code, inserted in the header of the report datapage: <script> alert('[@authfield:Country]' +' is the current country ' + ' -> going to hide column/row B if country is USA'); if ('[@authfield:Country]' === 'USA') { document.getElementById('targetxxx').innerHTML = "<style>#targetxxx table:nth-of-type(1) td:nth-of-type(2) {display: none;} </style>"; document.getElementById('targetxxx').innerHTML = "<style>#targetxxx table:nth-of-type(1) th:nth-of-type(2) {display: none;} </style>"; } </script> <div id="targetxxx"> and the below inserted in the footer: </div> Last but not least, attached is the sample Caspio app CaspioData_2019-Feb-25_2157.zip
  16. Here is my dilemma - my initial Client Table is set up to take in up to 2 address and up to 2 names per record to create a Client List. This is because if a husband and wife call us for work, we want them on the same account and such. Same with the Address field, because they may have a personal home and a rental home, in example. My Work Order form, which takes place after finding the client through the Client List, can only take in One address and One name. I couldn't put in two address fields into one dropdown with Caspio Standard Features. To combat that, I created a third page to act between the client list and the Work Order Form. This page will take in a parameter from a button on the Client List, where the user will select the Address and the Name to be on the Work Order Form. So, we made our own dropdown in an HTML table that includes both Addresses, so you can select one. Here is the code for the HTML block dropdown - <select id='test'> <option value="[@field:Primary_Client]">[@field:Primary_Client]</option> <option value="[@field:Additional_Client]">[@field:Additional_Client]</option> </select> I am needing help creating JS script for a query string value - it will send the selected value from the custom HTML Block Dropdown to the Work Order Form. Here are the table designs for the Client List and the Client Work Order list. You can see the Client Table has two address fields and the Client Work Order Table has one. Same with Client Names. The Client List Table is the 1st screenshot, and the Work Order Table is the 2nd.
  17. Hello. I would like to concatenate two text fields (both foreign keys) and populate a third text field in the same table with the concatenated value when submitting a DataPage. I understand how to do this when I am concatenating the stored value of the fields, but I would like to concatenate the display values of the two lookup fields, not their stored values. Please advise.
  18. Hi there, I would appreciate if someone could help me modifying styles of a dropdown on inline insert functionality of Tabular Report Datapage. I have a Cascading dropdown "EMAIL" where I would like to assign a special font and add a bottom border for each option. The challenge I am facing is that I have other dropdowns on this Datapage and I would like them to preserve default styling. Thanks, vitalikssssss
  19. In a Single Record Update form I'm trying to update different fields based on the value of a Virtual field. The Virtual field is loading with and External Parameter (number value). Depending on what value that Parameter is I need a specific field to update/change on when the 'Update' button is clicked. I don't want all fields to update, just a single specific field based on the value of the Virtual field. For example: If Virtual1= 3 then update myField1="mytext" If Virtual1=4 then update myField2="mytext" If Virtual1=5 then update myField3="mytext" Here's some code I'm working with but can't seem to get it right. It's in the footer of the Single Record Update form. <script> function changeVal() { var v_product = document.getElementByID("EditRecordcbParamVirtual1").value; if(v_product=="3") { document.getElementById('EditRecordmyField1').value = "Not Activated" } else if (v_product=="4"){ document.getElementById('EditRecordmyField2').value = "Not Activated" } else if (v_product=="5"){ document.getElementById('EditRecordmyField3').value = "Not Activated" } document.getElementById('caspioform').onsubmit = changeVal; </script> I tried this without the 'else if' part (for just the first If=3) but still couldn't get it to work. It's probably just some syntax- any help would be greatly appreciated.
  20. Hello All, I have a Details datapage that I'm using to update a series of related records, one at a time. I've got code to run the update automatically (so the user doesn't have to click a button). The final setting is "Navigate to next/previous records" so it cycles through all the related records (filtered by a common ID number for each record). What I need it to do is, after the LAST records is updated, go to a new web page entirely. I don't know how to do BOTH "Navigate to next/previous records" AND THEN go to a new page after last record is updated. Does anyone know how to do this? Many thanks in advance!
  21. I have a Details page that I'm using Auto Submit code to cycle through and update related records. However, when it gets to the last record (for example, 4 of 4) it keeps in the 'submit' cycle. I need the form to stop submitting once it's submitted the last record. Then, ideally, I need the form to go to another web page. But getting it to stop submitting after the last record update would be a good first step. Does anyone know how to adjust the Auto Submit code I'm using below? <script type="text/javascript"> if(document.getElementById("caspioform")) { document.getElementById("caspioform").style.display = 'none'; setTimeout('document.forms["caspioform"].submit()',1000); } </script>
  22. I accidentally posted this in the wrong forum (datapages) so I wanted to repost it here: I have some code I'm trying to get to work in the Footer on a Details form to halt AutoSubmit code when a value of 1 is reached in a Virtual field (calculated). The Details datapage is set to go to 'Next Record' on update so the Auto Submit cycles through the records. The problem is that when it gets to the last record it keeps auto submitting and I need it to stop AFTER submitting the last record. I found some code on this forum but can't get it to work- that code was older, before virtual fields could be calculated. If anyone knows how to adjust this code to get it to work that'd be really great. <script type="text/javascript"> if(document.getElementById("caspioform")) { if(document.getElementsByName("cbParamVirtual2")[0].value==1) { document.getElementById("caspioform").style.visibility = 'hidden'; document.write('<font face="arial" color=red size="5">No more Submissions!'); } else { setTimeout('document.forms["caspioform"].submit()',1000); } } </script>
  23. Can any buddy help me i need to add $ symbol on product_price and sub_total.. <script> $( document ).ready(function() { $(document).on("input paste keyup", ".product_qty", function( event ) { var product_quantity = 0; var product_price = 0; var gst_amount = 0; var sub_total = 0; var total_qty = 0; var grand_total = 0 product_quantity = $(this).val(); product_price = $(this).parent().prev().html(); sub_total = product_price * product_quantity; $(this).parent().next().html(sub_total); $('.product_qty' ).each( function( k, v ) { product_quantity = parseInt ( $(this).val() ) ? parseInt ( $(this).val() ) : 0; product_price = parseFloat($(this).parent().prev().html())?parseFloat($(this).parent().prev().html()):0; console.log(product_quantity); console.log(product_price); sub_total = parseFloat ( product_price * product_quantity ); console.log(sub_total); total_qty +=product_quantity; grand_total += sub_total; }); if ( grand_total > 0 ){ gst_amount = ( grand_total * 6 ) /100; } $("#total_qty").html(total_qty); $("#total_amount").html(grand_total); grand_total +=gst_amount; $("#gst_amount").html(gst_amount); $("#discount_amount").html(0); $("#grand_total").html(grand_total); }); // $(document).on("click", ".delete", function( event ) { var cart_item = 0; $(this).parent().parent().remove(); cart_item = $('.product_qty').length; if ( cart_item <= 0 ) { $("#total_qty").html('0'); $("#total_amount").html('0'); $("#gst_amount").html('0'); $("#discount_amount").html(0); $("#grand_total").html('0'); } else { $('.product_qty').trigger('keyup'); } }); }); </script>
  24. Hi! I am trying to create 8 Date/Time fields where the user inputs Date, Hours and Minutes in separate fields. I found some JS that works on combining the input, but it only works on combining one set of the three fields to on Display Field. This is the code that I put in the Footer: <script> //Created_On_From document.getElementsByName('Submit')[0].onmouseover = function(){ var date = document.getElementById('cbParamVirtual11').value; if(date == ""){ date = "00/00/0000"; } var hour = document.getElementById('cbParamVirtual26').value; if(hour == "") { hour = "00"; } var minute = document.getElementById('cbParamVirtual27').value; if(minute == "") { minute = "00"; } document.getElementById('cbParamVirtual49').value = date + " " + hour +":"+ minute; }; </script> <script> //Created_On_To document.getElementsByName('Submit')[0].onmouseover = function(){ var date = document.getElementById('cbParamVirtual18').value; if(date == ""){ date = "00/00/0000"; } var hour = document.getElementById('cbParamVirtual33').value; if(hour == "") { hour = "00"; } var minute = document.getElementById('cbParamVirtual32').value; if(minute == "") { minute = "00"; } document.getElementById('cbParamVirtual48').value = date + " " + hour +":"+ minute; }; </script> Any help would be appreciated...
  25. I want to change the blue color and shape of a selected Dropdown. I believe it takes more than CSS and requires Javascript. Please check the attached image. Any ideas? Thanks! Jared
  • Create New...