achatwani Posted September 28, 2020 Report Share Posted September 28, 2020 Hi - I'd like my page to automatically display updated results when a user selects a new value in the listbox. I'm pulling the values for the listbox from a lookup table. I tried following the forum here - But there are a few differences. For one, I am using a listbox. Two, since this forum, caspio has started appending unique ids to their elements. I'm able to "fake" the click using a custom search button, but I'd like the click to be triggered when a user changes their selection from the listbox. When I print the unique ids to the console, I'm seeing that caspio is returning two different ids - one of the search form and one of the report form. I'm stuck on how to move forward! <body> <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var suffix = event.detail.uniqueSuffix; console.log(suffix); }); document.getElementById("cbFormSelect"+suffix).onchange = myFunction(); function myFunction(){ document.getElementById("searchID_f7f77d11d467fb.cbSearchButton").click(); } </script> <button id = "testButton" onclick = "myFunction()">Search</button> //testing if myFunction works - it does </body> Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted September 28, 2020 Report Share Posted September 28, 2020 Hi @achatwani, Can you elaborate if you use List-String (datatype) or Listbox (form element)? Regards, vitalikssssss Quote Link to comment Share on other sites More sharing options...
achatwani Posted September 28, 2020 Author Report Share Posted September 28, 2020 Hi @Vitalikssssss, I'm using a listbox (form element). Thanks! Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted October 6, 2020 Report Share Posted October 6, 2020 Hi @achatwani, Please try the following JavaScript: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var suffix = event.detail.uniqueSuffix; document.querySelector(".cbFormSelect").addEventListener("change", myFunction); function myFunction(){ var button = document.querySelector(`#searchID${suffix}`); if(button) { button.click(); } } }); </script> Place it in the Footer of Search Form and make sure that you have disabled HTML editor prior to inserting the code. Hope this helps. Regards, vitalikssssss HeyItsDoug 1 Quote Link to comment Share on other sites More sharing options...
achatwani Posted October 9, 2020 Author Report Share Posted October 9, 2020 This worked perfectly, thank you! Quote Link to comment Share on other sites More sharing options...
ryant Posted July 12, 2023 Report Share Posted July 12, 2023 What about if they're dropdowns? I have four dropdowns in the search and the js that Vitalikssssss provided only works on the first dropdown and not the others for some reason. Quote Link to comment Share on other sites More sharing options...
PotatoMato Posted July 13, 2023 Report Share Posted July 13, 2023 Hi, @ryant. You can use the ID of the dropdown fields instead of .cbformselect: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var suffix = event.detail.uniqueSuffix; document.querySelector("#Value1_1").addEventListener("change", myFunction); document.querySelector("#Value2_1").addEventListener("change", myFunction); function myFunction(){ var button = document.querySelector(`#searchID${suffix}`); if(button) { button.click(); } } }); </script> You can check the JS elements here: https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/ - Potato Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.