Jump to content

Search the Community

Showing results for tags 'JS'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Caspio Bridge
    • Caspio Apps for Ukraine
    • 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. Hello; I use the JavaScript Here to format phone numbers. <SCRIPT LANGUAGE="JavaScript"> function f_a(v_id) { return document.getElementById(v_id); } f_a('InsertRecordPhone').maxLength = 14; f_a('InsertRecordPhone').onkeyup = function(v_e) { v_e = v_e || window.event; if (v_e.keyCode >= 65 && v_e.keyCode <= 90){ this.value = this.value.substr(0, this.value.length - 1); return false; }else if (v_e.keyCode >= 37 && v_e.keyCode <= 40){ return true; } var v_value =(this.value.replace(/[^\d]/g, '')); if (v_value.length==7) { this.value = (v_value.substring(0,3) + "-" + v_value.substring(3,7));} else if(v_value.length==10){ this.value = ("(" + v_value.substring(0,3) + ") " + v_value.substring(3,6) + "-" + v_value.substring(6,10)); }; } </SCRIPT> Does anybody know how to get a search field to behave the same way? I've tried InsertRecordPhone, SearchPhone, EditRecordPhone, Search, and Value1_1(It's actual id). Thanks
  2. Hi there, For one of my projects, I needed to display 0-100 values in one of the fileds on tabular report in a form of a progress bar. Here is an example of how it looks: https://c7eku786.caspio.com/dp/7f80b0006598726cb69c4239b1dc In this forum post I would like to share 2 solutions to achieve this. One presuposses using only HTML/CSS and the second one requires JavaScript. 1. HTML/CSS solution. 1.1 Add next CSS to the header of your DataPage" <style> .progressbar-container { background-color: #f1f1f1; } .progressbar { background-color: #9e9e9e; height: 24px; padding: 5px; color: white; }</style> 1.2 Add HTML block to your tabular report (results page) that will represent a progress bar 1.3 Add next HTML code to the HTML block: <div class="progressbar-container"> <div class="progressbar" style="width:[@field:ProgressBar]%;">[@field:ProgressBar]%</div> </div> 1.4 Substitute [@field:ProgressBar] with the field name where you store values from 0 to 100 2. JavaScript solution 2.1 Add the same CSS code as in 1.1 2.2 Add next JavaScript snippet to the header of your DataPage (below or above style) <script> if (typeof addProgressBar == 'undefined') { const progressBarPosition = 3 const addProgressBar = ()=> { document.querySelectorAll(`.cbResultSetTableCellNumberDate:nth-child(${progressBarPosition})`).forEach(progressBarCell => { let value = progressBarCell.innerText progressBarCell.innerHTML = `<div class="progressbar-container"> <div class="progressbar" style="width:${value}%;">${value}%</div> </div>`}) document.removeEventListener('DataPageReady', addProgressBar) } document.addEventListener('DataPageReady', addProgressBar) } </script> 2.3 Substitute value of progressBarPosition variable so it matches the position of your field that holds 0-100 value in the report DataPage Difference between this approaches is that HTML version of the progress bar will not allow sorting once you click on the field label where JavaScript approach allows sorting once field label is clicked. Hope this helps to someone
  3. Hello Caspio Family, Unfortunately, Caspio doesn't have a feature that would allow validating the date before the Submission Form. The only way I found using Caspio standard features is to show a warning message when the date doesn't fit the condition (e.g. when the date should not be prior to today). You can do that with the help of rules. I will show you an example with two dates 'Start Date' and 'End Date' with conditions: the Start Date shouldn't be prior to today and the End Date should not equal or be before the Start Date. 1) Add 2 HTML blocks beneath each Date field and add a section to each HTML block 2) Inside HTML blocks we need to add some warning message in case the condition is not met 3) Create 2 Rules as on screenshots That solution will show our warning messages, but won't prevent form submission if a user disregards the warning. But if it is necessary to let users submit only correct dates, you can use the second solution with JavaScript: 1. Insert Header&Footer, HTML block 1, HTML block 2, and place them below our Date fields. No need to add extra sections. 2. In the Header enable 'Source' and paste the code:<script>document.addEventListener("BeforeFormSubmit", function (event) {startDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;warn1 = document.querySelector("#warning1");warn2 = document.querySelector("#warning2");var today = new Date();var dd = String(today.getDate()).padStart(2, '0');var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!var yyyy = today.getFullYear();today = mm + '/' + dd + '/' + yyyy;if (startDate < today) {event.preventDefault();warn1.style.display = 'block'} else {warn1.style.display = 'none'}if (endDate <= startDate) {event.preventDefault();warn2.style.display = 'block'} else {warn2.style.display = 'none'}});</script> 3. In the HTML block 1 enable 'Source' and paste:<span id="warning1" style="color:#FF0000;display:none;">Start date cannot be in the past or empty</span> 4. In the HTML block 2 enable 'Source' and paste:<span id="warning2" style="color:#FF0000;display:none;">End date cannot be prior or same as Start date or empty</span> 5. Make sure your datafield 1 and datafield 2 are called 'DateStart' and 'DateEnd' respectively or in the JavaScript added to the Header you need to replace in the linesstartDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;to the name of the fields you have. You can test to see how it works on my DataPages: 1st solution with Rules 2nd solution with JS
  4. I am building a one-page Caspio submission (deployed by embed) form for clients to fill out. Viewable here: Test Form • WIM Tracking I want the data to save locally (without the user having to submit the form) in case they are kicked off their browser or leave and return to it later. I have read that I can use localStorage.setItem and localStorage.getItem. I have found a couple other posts, but they don't quite translate to what I am doing. I have included the posts I have found below and have based the following code on those posts. Any suggestions? <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { console.log("DataPageReady"); console.log(document.getElementById("CaspioForm")) fields = document.getElementById("First_Name") for (field of fields) { //Load stored data into that field and add a listener to store the data on change handleStorage(field) } //Instead of having to list }); //Handle loading/storing data for a field function handleStorage(field) { // Get value out ofstorage and populate the field with it console.log("Loading value " + localStorage.getItem(field.id) + " for field " + field.id); if (field.type == "checkbox") { //The storage is saving the boolean as a string, so we need to //convert it back to a boolean for checkboxes field.checked = (localStorage.getItem(field.id) == 'true'); } else { field.value = localStorage.getItem(field.id); } //Add a listener to store the data every time a field changes //This will fire every time they type a letter. field.addEventListener('input', (event) => { console.log(event); //Checkboxes store their value in "checked" instead of "value", //so you have to handle it separately. value = (event.target.type == "checkbox") ? event.target.checked : event.target.value; console.log("Storing " + value + " for " + event.target.id); //Store the the value for the id (The id should be unique, // so you might as well use it as your storage key as well) localStorage.setItem(event.target.id, value); }); } </script>
  5. Hi there, I decided to share a script that will help to have 2 separated virtual fields to display foots and inches separated. Similar to Date/Time Parts https://howto.caspio.com/tech-tips-and-articles/common-customizations/separate-input-fields-for-datetime-parts <script> document.addEventListener('BeforeFormSubmit', function(event) { let ft = document.querySelector("#cbParamVirtual1").value; let inch = document.querySelector("#cbParamVirtual2").value; document.querySelector("#InsertRecordHeight").value = `${ft}′ ${inch}″` }); </script> The result that we get will look like 1′ 2″. It can easily be chanded to whatever you need. For example if we change `${ft}′ ${inch}″` to `${ft}ft ${inch}in`, the result will be 1ft 2in. Hope it helps someone.
  6. Hi guys, Is it possible to print the tabular report excluding some data? I have a tabular report, where we keep some data and one of the column is important for analytics, but should not be included in the printed report. It is a report with totals and aggregations, so I want to see in the printed report the totals without the aggregated fields, only the total without the data it combines. I know it might be possible to create two different datapages, but it is not good practice to use a datapage just for printing a single report sometime. Does anybody have any JS or CSS suggestions for my case?
  7. Hi there, In case if you have 2 dropdowns where all of the options or some of them are equal and you don't want the same option to be choosen in both dropdowns, that JavaScript may help you: <script> document.addEventListener('DataPageReady', function (event) { const dropdown1 = document.querySelector("#InsertRecordDropDown1"); const dropdown2 = document.querySelector("#InsertRecordDropDown2"); dropdown2.onchange = function () { let options1 = dropdown1.options; for (let a1 = 0; a1 < options1.length; a1++) { if (options1[a1].value == dropdown2.selectedOptions[0].value) { options1[a1].disabled = true; } } }; dropdown1.onchange = function () { let options2 = dropdown2.options; for (let a2 = 0; a2 < options2.length; a2++) { if (options2[a2].value == dropdown1.selectedOptions[0].value) { options2[a2].disabled = true; } } }; }); </script> Make sure that you changed IDs of your dropdowns in constantas. Hope someone find it useful=)
  8. Hi! There is a Tabular report with a comment field (Text64000). I want to add a "Copy Text" button, that on click will copy text from the comment field to the Clipboard, so a customer can copy the text without highlighting and copying. Just one click action to copy. I have found some solution, but it does not look like working in the reports: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp Has anybody done it before or maybe you have some working solution? Thanks in advance.
  9. Hello Caspio Family, I wish to share a JS code snippet with you, in case if you wish your users to confirm form submission if a certain condition is met. For example, if some field is empty. Let's say we have a text field for email which is not required. When that field is empty, we wish to ask our visitors if they are sure they want to submit the for without the email. document.addEventListener("BeforeFormSubmit", function (event) { if (document.getElementById("InsertRecordEmail").value == "") { event.preventDefault(); if (confirm("Are you sure you want to submit the form without your email?")) { document.forms["caspioform"].submit(); } } }); Let me know who thinks it is useful.
  10. All, Not sure if this is in the correct discussion, but has anyone connected a Smiirl counter (https://www.smiirl.com/) to a caspio datapage output/value yet? I understand the Smiirl counter connects based on JS /Node: const express = require('express'); const app = express(); app.get('/', (req, res) => { res.json({number: 12345}) }); app.listen(80); or in PHP: header('Access-Control-Allow-Origin: *'); header('Content-Type: application/json'); echo json_encode(array('number' => intval(date('Hi')))); or in Phyton: import http.server import socketserver import json from http import HTTPStatus class Handler(http.server.SimpleHTTPRequestHandler): def do_GET(self): data = { "number": 54321 } self.send_response(HTTPStatus.OK) self.send_header('Content-type', 'application/json') self.end_headers() self.wfile.write(bytes(json.dumps(data), "utf-8")) httpd = socketserver.TCPServer(('', 80), Handler) httpd.serve_forever() source: https://www.smiirl.com/en/counter/category/custom Use case We are using Caspio to monitor an approval/voting process, it would be a nice gimmick to hand the customer a Smiirl counter before the voting process starts so they can track it's progress live. The # of votes in favour would need to be posted by Caspio and picked up by the Smiirl counter. Thoughts? Looking forward to your ideas.
  11. Hello, Is there a way to refresh a calculated field when a button is clicked? I have a field set to 'Calculated Field' in a submission form that references a couple other fields that themselves are updated with a button's js function. When you don't manually (type in) update a field then the calculated field won't show any changes. So when my button's function runs and Field1 gets a timestamp, the calculated field that uses Field1 doesn't refresh. It does refresh if I type in the time/date to Field1. I'm need to show the refreshed value in the calculated field before it is submitted. Any help would be appreciated!
  12. Hello, I have some js in the Destination part of a submission form, for after the Submit happens (I do this in js because there are 3 different sets of options to go to after submission, depending on what the user selected in the submission fields). I'm using window.location instead of window.open because of popup restrictions. I need to do 2 things on form submission: 1) have the existing window go to a url with parameters like a normal Caspio form can do and 2) open a different url in a new tab. So basically, the user clicks Submit, the existing window refreshes to a new page and a new tab opens to a different url. Is this possible? Something like: window.location.href = '[@field:First_URL]'; window.location.href = '[@field:Second_URL]', '_blank'; I don't know how to get it to run the code for the 2nd url before it updates to the first, as well as get the 2nd url to open a new tab.
  13. 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>
  14. I wish to create a multiselect dropdownlist with few group title, which we normally known as "HTML <optgroup> Tag". We can't customize the html inside Caspio Datapage. Is it possible with javascript custom code? Sample image is here below please check and thanks you.
  15. I am look for a JavaScript that I can use to activate a field in a result table, then make it editable so that the user can increase or decrease the value in the field by just clicking on a plus or minus button, which have counter-increment function, next to the field on the same row and finally update the field automatically. I would like to implement a script that can do this task instead of a user clicking on the edit button then adding value in the field and then click the update button. Has anybody done this. Please help. LM
  16. Hello, I've got a submission form with 2 fields that I need to concatenate into one field (ideally with a space between the values as it's a 'first name' and 'last name' value that need to be put into a 'full name' field. Again, I'm trying to do this on Change for First or Last name so Full_Name autofills as the user enters values. The code I'm using below doesn't work so I must be missing something. If someone can look at the syntax that'd be awesome. <SCRIPT LANGUAGE="JavaScript"> $("#InsertRecordFirst_Name, #InsertRecordLast_Name").change(function(){ var v_first = document.getElementById("InsertRecordFirst_Name").value; var v_last = document.getElementById("InsertRecordLast_Name").value; var v_fullname = v_first + v_last; document.getElementById("InsertRecordFull_Name").value = v_fullname; }); </SCRIPT>
  17. How can I use Multiselect listbox to perform a search with OR logic? I have separate search and report as described in the video: https://howto.caspio.com/getting-started/display-results-on-a-separate-web-page/ Does anybody have ideas?
  18. I have an issue with the case on the report page, where the field should be active for adding or visible (hidden before). Details: I have a dropdown for answer revision with three status variants: Pending, Approved and Not Approved. The changes are provided via inline edit. If the message status is not approved I should be able to write a comment, but for the other cases window should not appear or should not be editable. It would be nice if somebody can help me with this case. Thanks.
  19. The main goal is to have a pre-defined on-load multi-selected listbox. The listbox element uses Cascading dropDown virtual element. It should hide some sections if 1 element selected and hide others if 2 elements are selected. Can anybody help me with the Caspio or maybe JS solution? Thanks.
  20. I am trying to create an html block with custom JS code that converts my Record Count Field into a hexadecimal value. Eg. RecordCount = 1000, then convert to Hex = 3E8. I need this value to be displayed. Can someone please assist me with some code?
  21. I need to set up a multi-column lookup list in the middle of a datapage. I have looked extensively and have not yet found an example. It would seem that others may have had this need. It looks like the existing listbox is not set up, yet, to handle multiple fields/columns. I am open to a HTML block solution, but, I don't know enough HTML myself to know how to build a multi-row, multi-column table dynamically that ties to a table. (the count of qualified records varies depending on the client business being profiled). The solution may be a data array built in javascript with nested for loops, that would feed the HTML table. I also have another multi-column lookup list where the cells/values of one of the columns needs to be editable. Currently records in the listbox control are not editable. I can build a static HTML table that includes edit boxes. The challenge here might be how to make this dynamic off a lookup dataset and insure that changed values in those edit boxes write back to the table they came from. I've even looked at an alternative solution of setting up a separate results table on a different datapage and then embed that in the middle of the datapage. But, currently Caspio does not seem to have the ability to embed a small tabular object from one datapage, into another. (The only way to do this seems to be to mash up two datapages on a webpage... but this does not give the user the in-line experience. Looking for expert guidance. Thanks in advance for any suggestions. Again, it seems like several other Caspio developers would have a use for such a solution. (maybe one is obvious and I am just not seeing it.) Thanks!
  22. I have found that if I manually click on a dropdown that is a parent to another cascading dropdown, the cascading dropdown works. But when I try to use javascript to change the value of that parent dropdown, I find that it does not kick off the cascading activity of the cascading dropdown that is connect to it. Strangely, the value changes in the parent dropdown (so it works), but it doesn't impact the cascading dropdown. The js code I am using to change the parent dropdown value is: document.getElementsByName("cbParamVirtual1")[0].value="2012"; which successfully updates the value, so I know the JS works. But it doesn't impact the cascading dropdown. Is there an onchange event that is misfiring? Any suggestions?
  23. I want to achieve this simple calculation (below) in my details page. This is where the user enters new lab_fee and the update should take place for the value of TotalFee. It should automaticcally display the value before i hit the Update button on the details page. .... 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); .... According to Caspio Bridge 13.0, it was suggested that the below javascript could do the job. i guess for my case i have to put some codes in the //do somethig. Or I might be wrong. Can anyone kindly help me on this? <script type="text/javascript"> document.addEventListener('BeforeFormSubmit', function (event) { // do something }); </script>
  24. Years ago I added some JavaScript to my forms to prevent clients from selecting a "due date" that isn't at least two weeks in the future. Recently that code has stopped working, and all submissions are allowed through, regardless of the date selected. I think this may be tied to the recent Caspio updates. At least, that's all that I can see; the forms themselves haven't changed. Below I'm pasting my JS, which resides in the footer area of my forms. Any ideas would be greatly appreciated. Thanks! (BTW, I know two weeks is 14 days, not 13. But my users don't seem to recognize that, so I made this small allowance.) <SCRIPT LANGUAGE="JavaScript"> function check_date() { var entered_value = document.getElementById("InsertRecorddateNeeded").value; var entered_date = new Date(entered_value); var two_week_date = new Date(); two_week_date.setDate(two_week_date.getDate() + 13); if(entered_date < two_week_date) { alert("Must be at least 2 weeks in future"); return false; } } document.getElementById("caspioform").onsubmit=check_date; </SCRIPT>
  25. I have a field called LockStatus that I do not display on the form (it gets checked somewhere else). If it is checked then I want to hide the update button. This is the code I'm using, however the update button refuses to hide. <script> if (document.getElementById("EditRecordLockStatus").checked){ document.getElementById("Mod0EditRecord").style.display="none"; } </script> Am I doing something wrong?
  • Create New...