Jump to content

How to implement onChange even for a dropdown field


Recommended Posts

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>

Link to post
Share on other sites
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!

Link to post
Share on other sites
  • 2 months later...

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

 

 

 

 

Link to post
Share on other sites

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>

Link to post
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
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.

image.png.0b588252aa056ad27c9876aa51ecea93.png

Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...