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>

[ManonG 0]

Hi Elderberg.

Where did you put that code so it would work?  In the footer?

 

Manon

[kpcollier 24]

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.