Elderberg 0 Report post Posted August 15 Hi, See below in green which i've spliced into the browser using 'inspect element'. how do I implement this within Caspio? <tr><td class="cbFormLabelCell cbFormLabel"><label for="InsertRecordSource_Shift">Shift</label></td><td class="cbFormFieldCell"> <select name="InsertRecordSource_Shift" id="InsertRecordSource_Shift" onchange="myFunction()" class="cbFormSelect"> <option value="AM" selected="selected">AM</option> <option value="PM">PM</option> </select></td></tr> Quote Share this post Link to post Share on other sites
George43 5 Report post Posted August 19 You should add this code below. <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { document.querySelector('#InsertRecordSource_Shift').addEventListener('onChange',()=>{ //your function body }) }); </script> Quote Share this post Link to post Share on other sites
Elderberg 0 Report post Posted August 20 Hey George, thanks for the support... Unfortunately, I was not successful in testing the above. Is there an alternate I can test? or can you confirm if this would work on a dropdown box? Quote Share this post Link to post Share on other sites
George43 5 Report post Posted August 20 Could you provide me with Deploy URL of the Data Page and Detail Description? Quote Share this post Link to post Share on other sites
DefinitelyNot31337 34 Report post Posted August 20 On 8/19/2019 at 4:17 AM, George43 said: You should add this code below. <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { document.querySelector('#InsertRecordSource_Shift').addEventListener('onChange',()=>{ //your function body }) }); </script> The listener on the element should be "change". In addition, I'd recommend using a Query Selector wildcard since AJAX Loading generates a random suffix for the attribute. Finally, while arrow functions () => {} look more neat, this doesn't work on IE11 and lower browsers. Putting it all together and updating George43's code, try this and see if it will work: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { document.querySelector('[id*=InsertRecordSource_Shift]').addEventListener('change', function() { //your function body } }); </script> Hope this helps. -DN31337! Quote Share this post Link to post Share on other sites
Elderberg 0 Report post Posted November 7 Hey DN31137! I'm picking this back up after some weeks now. I was never successful. See below what i've used. I've also provided the deploy link below for reference. Any assistance would be appreciated. Thanks in advance. <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { document.querySelector('[id*=InsertRecordSource_Shift]').addEventListener('change', function() { var shift=document.getElementById("InsertRecordSource_Shift").value; if(shift==="AM" ) { document.getElementById("cbParamVirtual4").selectedIndex = "1"; } else { document.getElementById("cbParamVirtual4").selectedIndex = "0"; } } }); </script> Deploy URL: https://c1aco134.caspio.com/dp/b08a7000d5a1d377dc7c4779b2a6 Quote Share this post Link to post Share on other sites
Elderberg 0 Report post Posted November 7 Success! From trying a few other solutions from the forum I found one that worked: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var x = document.querySelector('[name*=InsertRecordSource_Shift]'); x.onchange = function() { var shift=document.getElementById("InsertRecordSource_Shift").value; if(shift==="AM" ) { document.getElementById("cbParamVirtual4").selectedIndex = "1"; } else { document.getElementById("cbParamVirtual4").selectedIndex = "0"; } } }); </script> Quote Share this post Link to post Share on other sites
ManonG 0 Report post Posted November 17 Hi Elderberg. Where did you put that code so it would work? In the footer? Manon Quote Share this post Link to post Share on other sites
kpcollier 24 Report post Posted November 18 On 11/17/2019 at 3:24 AM, ManonG said: Hi Elderberg. Where did you put that code so it would work? In the footer? Manon Usually you want to put the JavaScript in the footer of the page. This allows all of the DOM elements to be loaded before the JS. Quote Share this post Link to post Share on other sites
ManonG 0 Report post Posted November 27 Hi Elderberg. Just like you, I've been trying for some time to get the value of a dropdown and copy it into a field. Would you like to send me a copy of your working caspio datapage. Thank you Manon Quote Share this post Link to post Share on other sites
Elderberg 0 Report post Posted November 30 On 11/27/2019 at 3:13 PM, ManonG said: Hi Elderberg. Just like you, I've been trying for some time to get the value of a dropdown and copy it into a field. Would you like to send me a copy of your working caspio datapage. Thank you Manon Hey Manon, See below where I used a Calculated Value to "copy" the value of a dropdown into a field. with regards to the javascript above, just place that into the footer like kpcollier mentions. Quote Share this post Link to post Share on other sites
ManonG 0 Report post Posted Tuesday at 11:55 AM Thank you Elderberg, I'll try and give you some news. Manon Quote Share this post Link to post Share on other sites