dynamically display images based on selection

Hello.
I would like to display an image on the form based on a selection using a group of checkboxes.
The names of the image files are stored in a table in the database.

I was thinking that I can use a custom element to display the file with an <img? tag and then I can an Ajax event linked to the checkboxes but I do not know how to refresh a custom element containing the <img>.

I hope I am making sense. What would you recommend I can use to simulate such a scenario?
Thank you.
Amelia

Hi Amelia,

I'm assuming that you mean to use a Radio Button group here where only one button can be selected at a time (though you could adapt the example to work with checkboxes I think).

I had a Radio button group with the name and ID 'image_picker' and a set of options where the values are the names of the images. My images are in the /images/ folder

After that I have a Custom Code action to hold the image

<div id='image' ><img src='' /></div>

In the On Load Event of the form I have a Load JavaScript action with this code

jQuery(document).ready(function(jQ) {
  var image, image_picker;
  image = jQ('#image img');
  image_picker = jQ('input[name=image_picker]');
  image_picker.on('change', changeImage);

  function changeImage() {
    var picked;
    picked = jQ('input[name=image_picker]:checked').val();
    if ( typeof picked == 'undefined' || picked == '' ) {
      jQ('#image').hide();
    } else {
      image.prop('src', '/images/'+picked+'.png');
      jQ('#image').show();
    }
  }
});

Basically this check the value of the radio button, if nothing is picked it hides the <div>, otherwise it shows the <div> and sets the src attribute of the <img> tag

Bob

PS You can see my test form here

hello Bob
Thank you for the code. However I have a problem, the code does not run. I think this is because I am using Mootools. I looked into the head section of my page and I see that I am using local versions of jQuery and also of mootools. I am using the gantry framework.
IS this what causes the code not to run at all?

I looked at the page you sent me and you are using an online version of jQuery. Should I do the same?
How to change the settings also would this not distroy my other forms which are built using mootools?

What can I do?
Thank you
Amelia

Hi Amelia,

jQuery and MooTools will run side by side provided that jQuery is in NoConflict mode. As you are running Joomla! 3 that no longer uses MooTools and you should probably plan to migrate to jQuery to avoid future problems.

My code should still run OK provided that jQuery is loaded. I recommend and use the jQueryEasy extension to clean up and manage the library loading. It seems to work well.

Please post a link to the form so I can take a quick look.

Bob

Hello Bob

I did not notice that I did not replace the name of my checkbox on that line as well.
Many thanks
Amelia