Search the Community
Showing results for tags 'js'.
-
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
- 6 replies
-
- 4
-
-
- js
- javascript
- (and 3 more)
-
Hi I am new to caspio, JS. I have a attendee checkin screen. I need to validate attendee by entering least on to the validation values to make sure the right person is checkedin. I have 3 validation values, code sent at the time of registration, mobile number and email. I have setup an update for with 3 virtual fields and modified a JS function I found on this forum to check if atleast on of the field is entered and then to check the enter field is same as on record. For some reason the fucntion never get call when I click the update button. below is the code. Really appreciate if someone can point what I am missing/doing wrong. Thanks in advance for your help. <script language="Javascript"> function myFunction() { var field_code = document.getElementById("cbParamVirtual1").value; var field_email = document.getElementById("cbParamVirtual2").value; var field_phone = document.getElementById("cbParamVirtual3").value; if (field_code == "" && field_phone == "" && field_email == ""){ alert("Please enter at least one verification value. Please try again."); return false; } else if ( field_code !== "") { If (field_code !== [@field:ER_CODE]{ alert("Attendee Code did not match. Please try again."); return false; } } else if (field_phone !== "") { If (field_phone !== [@field:Phone#]{ alert("Attendee Phone number did not match. Please try again."); return false; } } else if (field_email !== "") { if (field_email !== [@field:Email]) { alert("Attendee Email did not match. Please try again."); return false; } } } document.getElementById("caspioform"). Mod0EditRecord = myFunction; </script> -
I noticed that multiple sections with different number of columns per section on Details DataPages can lead to unequal white space distribution. It happens because CSS grid-template columns are not equal: I am sharing the following JavaScript that addresses this matter: <script> if(typeof mainDataPageReadyHandler == 'undefined') { const GetNumberOfGridColumns = (columnTemplateString) => { return columnTemplateString.split(' ').length } const getSectionWidth = (HTMLSection) => { return parseFloat(window.getComputedStyle(HTMLSection).getPropertyValue('width').replace('px', '')) } const generateGridTemplateColumnsString = (totalGridColumnsWidth, numberOfGridColumns) => { let gridTemplateColumnsString = '' let columnWidth = totalGridColumnsWidth/numberOfGridColumns for (let i=0; i<numberOfGridColumns; i++ ) { gridTemplateColumnsString+= `${columnWidth}px ` } return gridTemplateColumnsString } const setGridTemplateLayout = (HTMLSection, columnTemplateStr) => { HTMLSection.style = `grid-template-columns: ${columnTemplateStr};` } const mainDataPageReadyHandler = () => { let section = document.querySelector('section[id*="cbTable"]') let gridComputedStyleArr = window.getComputedStyle(section).getPropertyValue('grid-template').split(' / ') let columnTemplateString = gridComputedStyleArr[1] setGridTemplateLayout(section, generateGridTemplateColumnsString(getSectionWidth(section), GetNumberOfGridColumns(columnTemplateString))) } window.addEventListener('resize', mainDataPageReadyHandler) document.addEventListener('DataPageReady', mainDataPageReadyHandler) } </script> Hope it helps somebody. If you notice any corner cases that were not considered, feel free to leave your suggestion
-
Hi, Just wanna share this code that I came up with where I have a Tabulare Report with Totals & Aggregations and a link at the footer of the DataPage wherein that link's destination URL will depend on the value of the Aggregate. In this example, if the Aggregate has a value of zero, the link will lead you to URL1, but if it has a value that is greater than zero, it will lead you to URL 2. The first thing you're gonna want to add is the link on the footer (it could also be in the header, does not matter): <a id="conditionalbutton">CONDITIONAL BUTTON</a> You can change this up to however you want but you have to make sure to keep in the id="conditionalbutton" part. This is important because this is what the JavaScript (provided in the next step) will be referring to when assigning the appropriate URL to the link depending on the Aggregate value. Below is the JavaScript code (which you'll paste on the footer): <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var agg = document.querySelector(".cbResultSetTotalsDataCellNumberDate").innerHTML var cb = document.querySelector("#conditionalbutton") if(Number(agg) > 0){ cb.href = "www.google.com" }else{ cb.href = "www.facebook.com" } }); </script> You can replace the URLs as you see fit. In the above example, replace "www.google.com" with the URL that you want for the link if the Aggregate has a value greater than zero. Replace "www.facebook.com" with the URL that you want for the link if the Aggregate;s value is zero. -
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
-
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? -
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.
-
If you want to filter your DataPage Report from Authentication follow these steps: 1. In Authentication, add a Virtual Field. 2. The form Element of the Virtual Field should be Text Field 3. In the Advance tab you can pass the parameter on exit: 4. For Text Only parameters this should be sufficient to pass the value to the next form. 5. If you need to pass a Date, then you need to add this JavaScript Code to Header: <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> document.addEventListener('DataPageReady', function(event) { $(function() { $("#cbParamVirtual1").datepicker({ dateFormat: "mm/dd/yy" }); }); }); </script> 6. Change the Virtual1 to the corresponding Field based on your needs, you could as well change the Date Format according to your needs. 7. The Login Page will look like this: 8. In the Report DataPage, use the Authentication you just created/modified 9. Filter the result on Pre-Defined Criteria 10. Select a Date Field for your Search Fields 11. On Search and Report Wizard - Configure Filtering Fields in Advance Tab chose Recieve External Parameter 12. In similar way you could pass other parameters.
-
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
-
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> -
Separate Input Fields for Height Parts
Alexray posted a topic in User JavaScript and CSS Discussions
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. -
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?
-
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=)
-
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.
-
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. -
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!
-
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. -
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> -
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.
-
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 -
Concatenate 2 Fields Into on on change of each field
DesiLogi posted a question in General Questions
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> -
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?
-
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. -
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.
-
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?
