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
    • 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. I am trying to filter datapages that are embedded within a page that I show within an iframe and I can not seem to get the parameters to pass into the I-Frame when the parent page is loaded. I have a "Project" report with custom link to details page. This link passes Project_ID fine to datapages actually embedded on the target page. What I want to do is embed other pages (hosted on same domain) via IFrame and have the results of datapages embedded on the page shown in iframe filtered by the Project_ID. I want to use I frames to reduce load time, data usage and also have the ability to refresh specific datapages when editing data. Again, the parent page that hosts the Iframe is receiving the parameter fine, i just can not get the DPs within the embedded page to see the passed parameter. Much help in advance!
  2. Hi there! I had a use case where drop-down input contained long lines of text. By default, a long line of text inside select input is getting cropped at the right. But it was required to keep the full text visible. I wrote the script that can be used as it is to solve this problem. Just copy and paste the code below into your form data page header. <script> document.addEventListener('DataPageReady', _=>{ const mainFunction = _=> { hideSelectContainers() addVirtualSelectOptions() addVirtualSelectOptionsListeners() addVirtualSelectOptionsContainerListeners() addStyles() } const hideSelectContainers = _=> { document.querySelectorAll('.cbFormSelect').forEach(item=> {item.style = "display: none;"}) } const virtualSelectContainerGenerator = selectElement => { let template = ''; selectElement.querySelectorAll('option').forEach(option=>{template += `<div value="${option.getAttribute('value')}" class="virtualOption">${option.innerHTML}</div>`; option.classList.add("hideElement")}) return `<div class="virtualSelectContainer"> <div class="virtualSelect"> <span class="virtualSelectText">${selectElement.value}</span> <div class="virtualOptionContainer hideElement">${template}</div> </div><span class="custom-arrow"></span></div>`; } const addVirtualSelectOptions = _=> { document.querySelectorAll('[class*="cbFormBlock"]').forEach( item =>{ if(item.querySelector('select')!=null) { item.insertAdjacentHTML('beforeend', virtualSelectContainerGenerator(item.querySelector('select'))) } }) } const addVirtualSelectOptionsListeners = _=> { document.querySelectorAll('.virtualOption').forEach( option => { option.addEventListener('click', e=> { let realOption = document.querySelector(`[value="${e.target.getAttribute('value')}"]`); realOption.parentElement.selectedIndex = realOption.index e.target.parentElement.parentElement.querySelector('.virtualSelectText').innerText = e.target.innerText; e.target.parentElement.classList.toggle("hideElement"); }) }) } const addVirtualSelectOptionsContainerListeners = _=> { document.querySelectorAll('.virtualSelectContainer').forEach( item =>{ item.addEventListener('click', e => { let clickedElement = e.target; if (clickedElement.classList.contains('virtualSelectContainer')) { clickedElement.querySelector('.virtualOptionContainer').classList.toggle('hideElement'); } else if (clickedElement.classList.contains('virtualSelectText')) { clickedElement.nextElementSibling.classList.toggle('hideElement'); } else if (clickedElement.classList.contains('custom-arrow')) { clickedElement.previousElementSibling.classList.toggle('hideElement'); } }, true) }) } const addStyles = _=> { let style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .virtualSelectContainer { position: relative; max-width: 800px; --custom-paddings: 1em 5.5em 1em 1.5em; box-sizing: border-box; color: white; white-space: normal; } .virtualSelectContainer:hover { cursor: pointer; } .virtualSelect { box-shadow: 0 10px 20px rgba(0,0,0,1); font-size: 1.1rem; background: #4d5061; border: 0; max-width: 100%; } .hideElement { display: none; } .virtualOption { padding: var(--custom-paddings); margin-top: 10px; overflow: hidden; } .virtualOption:hover { background: #4A65FF; color: white; } .virtualSelectText { display: block; padding: var(--custom-paddings); } .custom-arrow { display: block; background-color: #3b3c47; height: 100%; width: 5rem; position: absolute; right: 0; top: 0; pointer-events: none; } .custom-arrow::before, .custom-arrow::after { z-index: 10; --size: .65em; content: ''; position: absolute; width: 0; height: 0; left: 50%; transform: translate(-50%, -50%); } .custom-arrow::before { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid rgba(255,255,255,.5); top: 40%; } .custom-arrow::after { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid rgba(255,255,255,.5); top: 60%; } .cbSubmitButtonContainer .cbSubmitButton { background-color: #4d5061; box-shadow: 0 10px 20px rgba(0,0,0,1); } .cbSubmitButtonContainer .cbSubmitButton:hover { background-color: #4A65FF; }`; document.querySelector('head').appendChild(style);} mainFunction() }) </script> It is currenlty deployed on this test page: https://c7eku786.caspio.com/dp/7f80b000aa77201adc02489f8c6d Hope someone will find this useful.
  3. Hi, I took some code from one of Caspio's demo apps (an appointment scheduler) to create a Time Picker on a Submission form. This works great, allowing far more detailed calendar scheduling than just using the date without a time. The issue is when the user needs to edit the date/time from the Calendar, in Details view. The code doesn't work in this case. I've changed the 'InsertRecord' part to 'EditRecord' but that doesn't seem to make a difference. Is there some difference to calling the code from the Update button vs a Submission button? Any help would be greatly appreciated. Below is the process and code in the Submission form's footer. I need to modify it to work in a Calendar's Detail view: a) the user selects a Date from the calendar popup for field Virtual6 (set to Text). b) the user then clicks this link in an html block to open the Time Picker: <input type="time" name="time" class="timeClass" id="timepicker"/> c) on Submission the code below runs to combine the date from Virtual6 and the time from the Time Picker into the actual Date/Time field TasksTimeine_CalDate. ****I need this code to work on a Calendar's Detail View Update. <script type="text/javascript"> var datefield=document.createElement("input"); datefield.setAttribute("type", "time"); if (datefield.type!="time") { //if browser doesn't support input type="time" document.addEventListener("DataPageReady", function () { $('#timepicker').timepicker({ timeFormat: 'HH:mm', interval: 1, minTime: '00:00', maxTime: '23:59', defaultTime: '6', startTime: '00:00', dynamic: false, dropdown: true, scrollbar: true, timepicker: true, datepicker: false, stepHour: 1, stepMinute: 1, timeInput: true, showHour: true, showMinute: true, pickerTimeFormat: 'hh:mm tt' }); }); } document.getElementsByName('Submit')[0].onmouseover = function(){ var date = document.getElementById('cbParamVirtual6').value; if(date == "") { date = "1/1/2011"; } var ampm = document.getElementById('timepicker').value; document.getElementById('InsertRecordTasksTimeline_CalDate').value = date + " " + ampm; }; </script>
  4. Hi there. I was trying to find a way to preview a PDF file before it is uploaded in a DataPage. The flow described in this article works for images only: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/preview-an-image-before-it-is-uploaded-in-a-datapage/ Here is a solution I came up with: <script> const HTMLFileInput = document.getElementById("EditRecordFile_1"); HTMLFileInput.addEventListener("change", event => { const src = URL.createObjectURL(event.target.files[0]); const outputWidth = window.getComputedStyle(HTMLFileInput.parentElement.parentElement).getPropertyValue('width') const outputHeight = parseInt(outputWidth.replace('px',''))*1.3+'px' if(document.querySelector('#output')==null) { HTMLFileInput.parentElement.insertAdjacentHTML('afterend', `<iframe src="${src}" width="${outputWidth}" height="${outputHeight }" id="output" class="cbFormFieldCell">IFRAME IS NOT SUPPORTED IN YOUR BROWSER</iframe>`) } else { document.querySelector('#output').setAttribute("src", src) } }) </script> Just substitute EditRecordFile_1 with id of your file input. You can also tweak the value of width and the height of the iframe so it fits your usual pdf file size. Hope this helps
  5. 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. Hi there! I needed to convert the number input into 123,456,789.00 format on the fly while a person types in. I was not able to find a default feature on Caspio, so I wrote this script that does the job. You can check the live version here: https://c7eku786.caspio.com/dp/7f80b000b3154265003240a4b07f Script itself below: <script> document.addEventListener('DataPageReady', _=> { document.querySelectorAll('.cbFormTextField').forEach( input => { input.addEventListener('input', e => { formatDecimals(e.target)}) input.addEventListener('blur', e => { formatDecimals(e.target, true)}) }) const formatNumber = n => { return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") } const formatDecimals = (input, blurEvent) => { let inputValue = input.value; let caretPosition = input.selectionStart; let initialLength = input.value.length; if (inputValue === "") { return; } if(inputValue.indexOf('.') >-1) { let decimalPosition = inputValue.indexOf("."); let beforeDecimal = inputValue.substring(0, decimalPosition); let afterDecimal = inputValue.substring(decimalPosition); beforeDecimal = formatNumber(beforeDecimal); afterDecimal = formatNumber(afterDecimal); if (blurEvent) { afterDecimal+='00'; } afterDecimal = afterDecimal.substring(0,2); input.value = `${beforeDecimal}.${afterDecimal}`; } else { input.value = formatNumber(inputValue) if (blurEvent) { input.value+='.00'; } } let updatedLength = input.value.length; caretPosition = updatedLength - initialLength + caretPosition; input.setSelectionRange(caretPosition, caretPosition); } }) </script> If this script is being used as it is, it will convert all text inputs into the aforementioned format. If you need this functionality only for some particular input, say with name InsertRecordNumber_ (check the screenshot), you must substitute the next block of code: document.querySelectorAll('.cbFormTextField').forEach( input => { input.addEventListener('input', e => { formatDecimals(e.target)}) input.addEventListener('blur', e => { formatDecimals(e.target, true)}) }) with: let numberInput = document.querySelector('input[name="InsertRecordNumber_"]'); numberInput.addEventListener('input', e => {formatDecimals(e.target)}) numberInput.addEventListener('blur', e => {formatDecimals(e.target, true)}) Hope someone will find this helpful
  7. Hopefully someone can look at this particular scenario and show how to open the popup in modal with an overlay background. A couple issues: I cannot use an iframe for the popup content (passing parameters to a Caspio datapage, which doesn't work smoothly via iframe). Nor can I use a div for the content (because it's an entirely different datapage) that's in the same datapage as the button that creates the popup. So I need to open an entirely new url in a window, as a popup. The new url (web page) will have a datapage embedded. The code below does this fine but I also need it to make the popup modal (with an overlay background around it, if possible). Does anyone know how to tweak this code to make the new window popup modal? Thanks for any help! Here's the button that is in an html block in a tabular datapage: <button class="btnew" type="button" onclick=" edititem('https://edit-item?ItemID=[@field:ItemID]', 'web', 1200, 900);"><span><i class="fa fa-pencil" aria-hidden="true"></i> Edit</span></button> And here is the js that is in the same html block that creates the actual popup with the relevant web page. This works well, I just need to make the popup modal. function edititem(myURL, title, myWidth, myHeight) { var left = (screen.width - myWidth) / 2; var top = (screen.height - myHeight) / 4; var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left); }
  8. Hello I have two fields in my submission form - date and day. The customer selects date (via calendar pop up text field). I need the day field to automatically be populated by the day of the week from the date input (so someone inputs 25/12/2013 and the day field automatically says 'Wednesday' or whatever). Currently, I'm tackling this in a very roundabout way, by passing a long date to a report data page and then using rules (if date contains 'Monday' then hide section 1 etc). This is laborious and requires the user to click again on a url link. There must be an easier way. Does anyone know how? Ideally some javascript to just take the day of the week from the date field would be good. If that's not possible, then javascript that basically says "if [@field:date] contains 'Monday' then go to data page XXXXXXX" All help appreciated. Thanks Duncan
  9. Are there any independent contractors out there that are familiar with Caspio and interested in doing some work utilizing Java script? Some minor enhancements needed with our Caspio form that requires JS code injected. Thanks!
  10. Hi all, I'm trying to do authentication in a modal window. It works fine on the happy path, as in the user inputs valid credentials . However, if a user puts in bad credentials or no credentials, the page refreshes and in order to see the error message, you must click the login button again. This is less than optimal UX. I have tried all the options in the standard Caspio feature set, and still can't seem to redirect to the modal window with the error message displayed on fail. I'm wondering if there's a way to achieve this behavior with javascript, or a clever workaround. Thanks.
  11. 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.
  12. 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
  13. Hi, Just want to share this bit of JavaScript and CSS that creates a fixed "scroll to top" button on the corner of your DataPage and shows up only when the user starts to scroll the page. (I implemented this on my Tabular Report DataPage that has many records per page) Header (CSS): <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } </style> Footer (the actual button and the JavaScript): <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <script> document.addEventListener('DataPageReady', function (event) { mybutton = document.getElementById("myBtn"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (window.scrollY==0) { mybutton.style.display = "none"; } else { mybutton.style.display = "block"; } } }) function topFunction() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script>
  14. Hi, Just wanna share this script I made that changes the background color of each record in a Gallery Report DataPage when clicking the button. For the button: <button onclick="RandomColor()">Try it</button> For the function that's responsible for changing the colors (For this one, there is no fixed set of color because this makes use of randomizers for setting the color code, so all colors possible can show up): <script> function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = '#' + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2)) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a00071c83c69ac9947d1bfd9 Alternatively, if you only wish to have a predefined set of colors to choose from, you can use this (simply change the colors in the array to your liking): <script> var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"]; function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a000574d59f66468479b955a Hope this helps!
  15. 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=)
  16. 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.
  17. Hi, So I have an HTML DataPage wherein I embedded multiple Report DataPages as iFrames. Would it be possible for me to have a button in the HTML DataPage that activates all the Download Data link for each of the Report DataPages so that all of them are 'clicked' all at once then generates the documents all at once? This way I wouldnt have to download them individually.
  18. I'm using a barcode reader to scan an order in a form, passing parameters to another form that scans the product sku, and the 2nd form opens itself up after each sku for however many skus are related to the order. It works well. The sum of the skus scanned by product are in another report datapage that updates on the same page the 2nd form is on. The report queries both the table used to scan skus for a sum by product, and a table containing data from shipping software that contains what should be shipped within it's table.... The only issue with this setup is that I'd prefer to get rid of the 2nd form, and just scan the order# , then pass parameters to the report page and use inline edit to scan skus.... the barcode reader hits enter itself with each scan and I have the button hidden... I can't get this done BECAUSE I can't get the cursor to focus on the inline edit field for skus when the first page opens the report. I think there should be an option for this like there is for forms....but since there isn't, I've been trying a bunch of scripts....here's my latest.... Footer: <script> { document.getElementsByName('EditRecordInlineAddlineItemsku').focus(); document.getElementsByName('EditRecordInlineAddlineItemsku').select(); } </script> Any ideas how I might fix this???
  19. Hi, I have a tabular report that list my users. One of the fields identify who is active and who is blocked. I want to show an padlock icon on the row of every blocked user. I mean: when the field [@field:Usuarios_Ativo^] value is "no". This is a "yes/no" field type I think that should be easy, but I am really struggling to make this work with my limited java skills. Many thanks Caspio minds!
  20. 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.
  21. Hello; I would like to dynamically choose a lookup table for a dropdown list. Similar to a cascading dropdown, but where the actual lookup table changes. Consider the scenario... Parent Dropdown options: Opt1 & Opt2 When Opt1 is chosen viewOpt1 populates the child dropdown When Opt2 is chosen viewOpt2 populates the child dropdown I have a workaround envisioned that entails adding many fields to the lookup table, and i would prefer to not un-optimize my app by doing that. Does anybody know of a js that can help me with this? Thanks!!
  22. Hi, I have a dashboard that contains one parent datapage (a stacked area chart) and several child datapages (pie charts) embedded as iframes in the footer of the parent datapage. The search terms for the parent datapage are configured to pass as external parameters to the child datapages. This works for all search terms where just one option is selected, but not for multi-select listboxes. Based on previous posts I've tried the following JavaScript to pass the multi-select listbox parameters, but with no success. Any suggestions? Thank you all! <script type="text/javascript"> var fieldName = "Value4_1"; var x1=document.getElementsByName(fieldName); x1[0].multiple=true; document.addEventListener('FormSubmitted', function(event) { var result = ""; for (var i = 0; i < x1[0].length; i++) { if (x1[0].options[i].selected) { result += "\"" + x1[0].options[i].value + "\"" + " OR " ; } } document.getElementById("Value4_1").value = result; }); </script>
  23. I have the Javascript in our submission form to format the phone numbers to this format: (123) 456-7890, but sometime I need to add an extension to that. Is there a way to edit the Javascript so that I have the option to have it look like this: (123) 456-7890 x123. I don't want to have a separate column in the table to add an extension because they aren't always there and it will show up funny in the results tables. Any thoughts?
  24. Hi, the below code is used to create comma-delimited text values (in a text255 field) so the user can select multiple values in a list box and save them (separated by commas) in a text field. It's necessary to use this method instead of the Caspio-native 'List' data type because the lookup values need to be dynamic (I wish Caspio would enable this, been waiting FOREVER). This method works great for Details and Update datapages but I need it to also work in a Bulk Edit page. I've tried changing 'EditRecord' to 'BulkEditRecord' but it doesn't work. Does anyone know how to modify this code to work in a Bulk Edit page? This is so the user can select multiple records and update them with multiple selections in a listbox. <script type="text/javascript"> var v_state = "[@field:state]" ; var o_state = document.getElementById("EditRecordstate") ; o_state.multiple = true ; function f_listbox() { if ( v_state.indexOf(",") > 0 ) { for (var i=0 ; i < o_state.options.length; i++ ) { if(o_state[i].value == v_state) { o_state.remove(i); break ; } } var o_st = v_state.split(", ") ; for (var j=0 ; j < o_st.length; j++) { for (var i=0 ; i < o_state.options.length; i++ ) { if(o_st[j]== o_state.options[i].value){ o_state.options[i].selected = true ; break ; } } } } } document.addEventListener('DataPageReady', f_listbox); //You can also use the line below instead of the eventlistener // setTimeout(f_listbox, 20); </script>
  25. I would like to ask for help in my JS code. I'm trying to change the value of a checkbox in a search form when a specific option in a dropdown is selected. I want the checkbox to be set to true if "Math" is selected in the dropdown. Below is my code that's not currently working: <script> function checkdropdown(){ var drpselected = document.getElementsByName("Value1_1").value; if (drpselected == "Math") { document.getElementsByName("Value2_1").checked = true; } else { document.getElementsByName("Value2_1").checked = false; } } document.getElementsByName("Value1_1").onchange = function() {checkdropdown()}; </script> Also, here is a screenshot in the "Configure Search Fields" step of the DataPage: I'm hoping someone can help me with this. Thank you.
  • Create New...