Jump to content
Sign in to follow this  
Elderberg

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>

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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?

Share this post


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!

Share this post


Link to post
Share on other sites

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

 

 

 

 

Share this post


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>

Share this post


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

Share this post


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...
Sign in to follow this  

×
×
  • Create New...