How to implement onChange even for a dropdown field

[Elderberg 0]

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>

[George43 5]

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>

 

[Elderberg 0]

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?

[George43 5]

Could you provide me with Deploy URL of the Data Page and Detail Description?

[DefinitelyNot31337 34]

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!

[Elderberg 0]

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

 

 

 

 

[Elderberg 0]

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>