Jump to content

Search the Community

Showing results for tags 'javascipt'.

  • 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






Found 23 results

  1. Hi, I am trying to create a workflow where the fields are shown or hidden by the selection in the dropdown. I have tried using Rules, however, they are limited in reusing fields in Action. Can someone point me to the right direction on how to achieve this? For example, I have a dropdown with the Number of children, it can be 1, 2, 3, 4 and 5. And I want to show input fields below based on that selection in the dropdown. So, if I choose 1 in the dropdown, only first input is shown. If I choose 2, the first and the second inputs are shown and so on.
  2. I found another solution in removing HTML tags in the data saved in Rich text editor. This is more if an alternative to this solution. Specially for those who doesn't have access to Triggered action. First you would need another field in your table that will store the plain text version of the actual input. Put that field in your Submission form and add a HEADER and FOOTER in your DataPage. Go the the FOOTER of your DataPage and disable the HTML editor in the Advanced tab. Paste the code below in your footer: <script type="text/javascript"> //This will hide the field for the "plain" text var non_formatted_txt = document.querySelector("#InsertRecordFIELDNAME_2"); non_formatted_txt.style.display = "none"; document.addEventListener('BeforeFormSubmit', function(event) { //This will replace all the HTML tags with blank var input = document.querySelector("#InsertRecordFIELDNAME_1").value.replace(/<\/?[^>]+(>|$)/g, ""); non_formatted_txt.value = input; }); </script> NOTE: replace FIELDNAME_2 with the actual fieldname of your field for the "plain" text and replace FIELDNAME_1 with the actual field name of the rich text editor field. Sample input : Actual table value: Non formatted value:
  3. Hi, can I use select table using caspio Api to external java script?
  4. Hi, the below code is to disable and relabel the Update button in Bulk Edit when it is clicked (it's a datapage with a lot of records and takes several seconds to update so the user needs to know what's happening and not click the Update button more than once). This code is in the footer of the Results page and not the Bulk Edit form. I need to add the additional code (see below) that redirects to another webpage and I can't figure out where/how to insert it into the disable/relabel code. Does anyone know how to do this? Here's the disable/relabel code for the Update button in Bulk Edit: <script> document.addEventListener('DataPageReady', function (event) { const target = document.querySelector('body'); const observer = new MutationObserver(mutations => { const updateBtn = document.querySelector('input[value="Update"]'); if(updateBtn){ updateBtn.addEventListener('click',function(){ disable(this); redirectToDP(this); }); } }); const config = {subtree:true, childList:true}; observer.observe(target, config); function disable(btn){ btn.disabled = true; btn.style.background="grey"; btn.value = 'Please Wait'; btn.removeEventListener('click',disable); } }); </script> Here's the code in the Bulk Edit footer for redirecting (I think it needs to be there because I have to get parameters from the Bulk Edit data fields): <script> function redirectToDP() { var v_proposal = document.getElementById("BulkEditItems_Triggers_CopyProposalID").value; var v_project = document.getElementById("BulkEditItems_Triggers_CopyProjectID").value; var url = "../proposal?ProposalID=" + v_proposal + "&ProjectID=" + v_project + "&pti=p"; location.replace(url); } </script> I tried to call the function 'redirectToDP' from the disable/relabel code but it doesn't work. Does anyone know how to get the redirect code to work with the disable/relabel code? Many thanks!
  5. Comments on your script or code can be helpful specially when it gets complicated and larger. This helps you to mark different parts of your code which in turn will help you debug them. I compiled a list of comment tags that can be used on every part of your DataPage whether it's for a calculated field, formula data type, JavaScript, CSS, or HTML. HTML comment tag: <!-- this is 1 line of comment --> or <!-- these are multiple line of comments--> CSS comment tag: /* This is 1 line of comment */ or /* These are multiple line of comments */ JavaScript // single line of comment or /* This is 1 line of comment */ or /* These are multiple line of comments */ SQL -- Singe line of comment or /* This is 1 line of comment */ or /* These are multiple line of comments */
  6. Hi there! I needed to find a way to highlight text that was entered in the text input, but was not able to find a ready made solution. With a bit of research and coding here is a solution that I came up with: <script> const HTMLTextInputIDs = ['cbParamVirtual1', 'InsertRecordNumber_Field_2'] const highlightedTextBackground = 'yellow'; const generateMimicInputTemplate = (inputId) => { return `<div contenteditable="true" class="mimic-text-input cbFormTextField" related-input="${inputId}"></div>`; } const addMimicInput = (HTMLInputElelement, HTMLMimicInputMarkup) => { HTMLInputElelement.insertAdjacentHTML('afterend', HTMLMimicInputMarkup); } const addMimicInputStyles = () => { document.querySelector('head').insertAdjacentHTML('beforeend', `<style> .mimic-text-input { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; white-space: nowrap; color: transparent; } .mimic-text-input:first-line { background-color: ${highlightedTextBackground}; } <style>`) } const syncInputWithMimic = (HTMLInputElelement, HTMLMimicInput) => { HTMLMimicInput.addEventListener('input', (e)=>{ HTMLInputElelement.value = HTMLMimicInput.innerText; }) } const syncMimicWithForm = (HTMLFormElement, HTMLMimicInput) => { HTMLMimicInput.addEventListener('keydown', (e)=>{ if(e.keyCode == 13) { console.log('enter fired') e.preventDefault(); HTMLFormElement.submit(); }}) } const main = () => { const HTMLcaspioForm = document.querySelector('#caspioform'); HTMLTextInputIDs.forEach(textInputID => { const HTMLtextInput = document.querySelector(`#${textInputID}`); HTMLtextInput.style.display = 'none'; addMimicInput(HTMLtextInput, generateMimicInputTemplate(textInputID)); const HTMLMimicElement = document.querySelector(`[related-input="${textInputID}"]`); syncInputWithMimic(HTMLtextInput, HTMLMimicElement); syncMimicWithForm(HTMLcaspioForm, HTMLMimicElement); }) addMimicInputStyles(); } document.addEventListener('DataPageReady', main) </script> Hope this helps. You can use it as it is. Just add this code to the header/footer of your form DataPage. The only thing you need to change is to add your IDs of your text inputs where you need this function to be added. These IDs are store in HTMLTextInputIDs array: const HTMLTextInputIDs = ['cbParamVirtual1', 'InsertRecordNumber_Field_2'] By analogy, you can add here coma separated IDs of your inputs. Also, cou can change the background color of the text in highlightedTextBackground variable. The end result will look like in the screenshot attached. Hope some will find this useful.
  7. 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>
  8. Hi, Does anyone know how to auto-activate the 'Update' button in the Bulk Edits form, so the user does not have to make a selection on any of the fields, in order to Update? I have a Bulk Edit form that has fields that are 'pre-checked' for updating (see attachment) when Bulk Edits is open. I just need the 'Update' button to be activated as well so the user doesn't have to make a selection on any of the fields.
  9. I need to create a number pad using buttons which will add a digit to the text on a virtual field. Is this possible using JavaScript?
  10. Hi, I'm trying to use some 'After Submit' code in a tabular datapage's Bulk Edit footer to go to a new destination after submission. The code below runs an 'auto submit' in Bulk Edit as well, but I can't get it to go to a new page afterwards. Does anyone know how to format this code so that after Bulk Edit submits a new page is navigated to? <script> var bulkEditSubmit = document.querySelector('.SimpleButton.ActionButton[value=Update]'); console.log(bulkEditSubmit); document.addEventListener('FormSubmitted', function(event) { window.location = '../invoice?InvoiceID=[@field:InvoiceID]&ProjectID=[@field:ProjectID]&pti=i'; }); setTimeout( () => { bulkEditSubmit.click(); }, 1000); </script>
  11. Hi, can anyone help me? I have been using the code below without issue on an Caspio HTML data page, but am having issues when I add it to an HTML block in a report. <button class="block" onclick="document.location='https://--myURL--? UniqueProjectID=[@UniqueProjectID]">MY URL</button> When I add the button to a report, the report seems to automatically activate the update_event (even without this button, or the update button being pressed). If I change the button's to hyperlinks, that I block up to look like a button, this seems to get round the issue, but really I would like to still use buttons. Changing responsive or AJAX doesn't solve the issue, and if the change the configure settings to stay on the same page after update, the page just blinks every second on a continuous refresh
  12. I am trying to dynamically set a Yes/No field in addition to redirecting a user after completion of a submission page. This is the code that I have in the Destination Page. Virtual1 captures the type and YesNoVariable is the flag that I want set. What I've done below does provide the right redirection based on the Virtual1 value but the value to set the YesNoVariable to true (or checked) does not. <script type="text/javascript"> if("[@cbParamVirtual1]" == "Adoption") { document.getElementById("InsertRecordYesNoVariable").checked=true; window.location = "http://page1?ProfileID=[@field:ProfileID]&ProfileFullName=[@field:ProfileFullName]"; } else if("[@cbParamVirtual1]" == "Foster") { window.location = "http://page2"; } else { window.location = "http://otherpage"; } </script> Appreciate fixing my code and any help in understanding how to properly set this value. Thanks in advance.
  13. Hi, I'm trying to use js to get the user's system date/time on their local computer, in the Bulk Edit section of a tabular datapage. I've used this code in various other datapage types but cannot get it to work in the Bulk Edit footer. In the footer of Bulk Edit, the field is Comments_Actual_Read_Date but it's not capturing the v_TimeStamp value. Does Bulk Edit need something besides EditRecord to reference a field? Here's the code I've got: <SCRIPT LANGUAGE="JavaScript"> /* Declaration and initialization */ Stamp = new Date(); var v_TimeStamp; Hours = Stamp.getHours() Mins = Stamp.getMinutes(); /* Attach a prefix with digit '0' if the minutes is less than 10. */ if (Mins < 10) { Mins = "0" + Mins; } /* Construct the value of the v_TimeStamp variable in the format m/d/yyyy hh:mm */ v_TimeStamp=('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate() + "/"+Stamp.getFullYear() + ' ' + Hours + ":" + Mins); /* Field name - Date_Charge is referred with a prefix - EditRecord */ document.getElementById("EditRecordComments_Actual_Read_Date").value = v_TimeStamp; </SCRIPT> EDIT: Ah, I found a post showing you use 'BulkEdit' instead of 'EditRecord' but now the issue is if js is used to populate the Bulk Edit field it doesn't check the left column 'select' box automatically so the user has to do it manually. This defeats the purpose and is clunky. Is there a way to 'select' the field in Bulk Edit using js?
  14. Hello! I have been trying to get this signature box to work with a responsive submission form but i can´t get it to work, it shows up in the form and i can draw in the box but it doesn´t save to the table. It works fine if I disable responsive and ajax. Does anyone have any ideas to solve this? Kind regards / Chrille
  15. Hi everyone, How can copy the text from the selected drop-down element to the text field? Thanks for looking into. Regards, vitalikssssss
  16. hello i need to resize all images in user form before submissions , client side not server side after submissions probably javascript code that resize all images in the form any idea about that or any other alternative
  17. I am trying to add Javascript to validate/limit the acceptable date range for a tabular inline add. I have tried several suggestions from various forum posts, but cannot get it to work. I started with this code as a form of this does work in a different application (https://forums.caspio.com/topic/16261-validate-field-value-before-submit-in-tabular-search-report-both-table-and-details/). Please help. <script> var nameOfField = "InlineAddDate"; document.addEventListener('DOMSubtreeModified', function(){ if(document.getElementsByName(nameOfField)[0]) { document.getElementsByName(nameOfField)[0].addEventListener('change', function(){ var cash = document.getElementsByName(nameOfField)[0].value; var sDate = new Date(cash); var prevMonday = new Date(); prevMonday.setDate(prevMonday.getDate() - (prevMonday.getDay() + 6) % 7); var nextSunday = new Date(); nextSunday.setDate(nextSunday.getDate() + (0+(7-nextSunday.getDay())) % 7); if (sDate < prevMonday || sDate>nextSunday){ alert("Enter a valid date between the previous Monday and the next Sunday."); document.getElementsByName(nameOfField)[0].value=""; document.getElementsByName(nameOfField)[0].focus(); }); } }); </script>
  18. How do I redirect a user to a login page if the user is not logged in? There is already question similar to this one but it doesn't have a clear answer.
  19. As it is right now, a data page with a calendar only has 2 options, monthly and weekly. Is there a way to create a calendar that only shows 3 Days at a time? Sincerely, Jared
  20. Hello, I'm new to Caspio. I have an Update Form with a calculated field called "Total_Percentage", that takes the values from other fields. Code below: Isnull([@field:PointFactor_Duties_PercentDuty1],0)+Isnull([@field:PointFactor_Duties_PercentDuty2],0)+Isnull([@field:PointFactor_Duties_PercentDuty3],0)+Isnull([@field:PointFactor_Duties_PercentDuty4],0)+Isnull([@field:PointFactor_Duties_PercentDuty5],0)+Isnull([@field:PointFactor_Duties_PercentDuty6],0) What I would like to do is to prevent users from going forward when their total exceeds 100%. I also, would like to show them, which field(s) is/are causing this field to go over the threshold of 100%. The rules section is not conducive to this goal, as rules section is limited. Triggered action section forces me to either email or text the users if their total exceeds 100%. I don't want to do this, since the whole point is for users to correct errors immediately. Is there anyone out there who can impart me a script or two to help me? SQL or javascript that would work with Caspio. Thank you so much. Emme
  21. I would like to change the attributes of the drop down. Color, padding etc. I don't like the blue color. Thank you for any help!
  22. Hi all, I'm fairly new to javascript and I'm working on this frequent buyer website. What I'm trying to do is to submit the form multiple times base on user input. I have this code: <SCRIPT> document.addEventListener('BeforeFormSubmit', function (event) { var countx = document.querySelector('[id*=Purchase_count'); for (var i=1;i < countx.value;i++) { document.getElementById("caspioform").submit(); } }) </SCRIPT> Is there a reason why it's not working properly in google chrome but works fine on Edge? Here's my datapage: https://c1abc789.caspio.com/dp/3dca7000a203fdee67e14f3ebfa1 Feel free to submit some test records. Thanks in advance for any help I can get on this.
  23. Hello, In a tabular datapage I need to show/hide a field (text64000) that contains html markup and needs to display as html. I use a div id to isolate each record in the tabular datapage's recordset. Then I use an 'if' statement to check the values of 2 fields in that record ("field1" and "field2"). If both criteria are met I need to then show the text64000 field ("field3") in html format. If both criteria are NOT met I need it to show nothing. The below code works to check "field1" and "field2" and then show a value in the span, either a typed in text value or a normal text field for that record. The problem is when I try to use the field that contains the html markup ("field3" in this example). It doesn't show anything (is blank). I know the "if" statement is working because I've tested it with other fields, just showing the field in html is the problem. Does anyone know how to tweak this so "field3" will show in html? I tried putting it in a div instead fo a span but that didn't work either. Any help would be greatly appreciated. <div id="mydiv[@field:MyRecordUniqueID]"></div> <SCRIPT LANGUAGE="JavaScript"> if (("[@field:myfield1]" == "SHOW") && ("[@field:myfield2]" == "active")) { document.getElementById("mydiv[@field:MyRecordUniqueID]").innerHTML ="<span>[@field:myfield3!]</span>"; } </script>
  • Create New...