Jump to content

Passing parameters to Javascript on change

Recommended Posts

Hi, I am a beginner to Caspio and scripting.  I have a datapage that is embedded into the HTML on my site.  I have the datapage set to conditionally format/hide certain sections of the page based on user input.  That is all working perfectly.  However, the first option on my datapage is a dropdown with 2 choices.  I would like to pass a parameter from that dropdown to conditionally change an image on the webpage where the datapage is embedded.  So, for example:

User chooses option "A" from the dropdown on the datapage and the image on the page where the datapage is embeded becomes a picture of an apple

User chooses option "B" from the dropdown on the datapage and the image on the page where the datapage is embeded becomes a picture of a banana

I have found examples on line of scripts that will change an image based on the output of a dropdown, but the dropdown and the image are both part of the same source (if that makes sense).  In my case, my dropdown is in Caspio, but the image isn't.  I know this needs to be done with Javascript and I know I can pass parameters from Caspio "on exit", but can I pass them "on change"?  If so, how do I do that?

Link to comment
Share on other sites

  • 1 year later...

Whenever I need something that happens in a Caspio datapage to 'exit' the datapage and do something on the host page I do it via calling a js function that affects the host page. 

For example, on the dropdown's 'change' you can call a js function  (which can be located on the host page in script), and that function can do something like shows/hide a divs on the host page. So if you have images in divs on the host page, using an id for each div, you can show/hide the div's id, depending on the value of the Caspio dropdown (which runs an onChange event to get the value, which then runs a specific function on the host page. 

This is a general answer as there are many ways to do it, but basically a) use onChange script in the datapage to read the new dropdown's value b) depending on that value call a js function c) that function can be in script on the host page and can then do anything you want on that page (show/hide divs, etc.). 

Link to comment
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.

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.

  • Create New...