Radio Button Images

Hi,

I wanted to know if it's possible to insert 2 images into the options box of a radio field for each radio button used using HTML whereby only one of the 2 images will be displayed depending on whether the radion button has been selected for that option or not ?

Your help would be appreciated.

Thanks Stuart

Hi Stuart,

Yes it is possible to insert image HTML codes on the radio button options box. I think you already figured out how upon checking your form here http://www.jotform.com/41252932609353. 

Though I'm not exactly sure how you want them to appear. 

Is it like this? http://form.jotformpro.com/form/41246256594964?

If you only want to display 1 image, you can add a visibility:hidden or display:none property to hide the second image.

<img src="//www.yourpic.com/pic1.png">&nbsp;&nbsp;<img src="//www.yourpic.com/pic2.png" style="display:none;">

Is this what you mean? If not, kindly elaborate your question so we can assist you further. Thanks!

Thanks for your reply.

What I want to do is say that a particular radio button is selected then image 1 will be displayed and if it is not selected then image 2 will be displayed in the same place, i.e. they will both never be displayed at the same time.

Thanks, Stuart

Hi, you can accomplish that using conditional logics. Follow this steps:

1) Add the Radio button to add the options, and an Image Field to upload the images on your form. 

2) Click on Setup&Embed, then on Conditions.

3) Select the Show/Hide a form field option, and set the conditions this way:

4) Click on Add New Condition, and do the same as in step 3, just this time the condition will be "If Option field Is Equal To Option2 then show Image(the second one)":

Click on finish, save you work, and click on Preview. You may check my form example here. Let us know if you have more questions, we will be glad to assist you.

Hi Stuart,

Just to add to the discussion, if you wish there to be two images per button, my colleague's solution would also work in such cases but the images would need to be absolutely positioned via the form's injected CSS.

Another route to achieve the desired functionality would be to get the form's full source and embed it into a web page. A script can then be added to the same page to either update the value of the source (src) attribute of each image or insert and remove the style attribute.

If you provide the image URLs and state which radio button each pair belongs to, along with which image should be shown when the buttons are selected, we should be able to give a tailor-made solution.

Thanks

Thanks for your replies, I will send over the info for the tailor made solution you have kindly offered.

In the meantime my account has account been disabled as it suspect I may be Phising ?  I'm not and have a different form which is currently connected to a live website which is now not working so would therefore appreciate it if my account -  could be reinstated as soon as possible. 

Thanks, Stuart

The account has now been reactivated so please ignore the last message.

Thx Stuart

Thanks Stuart for the update on the issue, please do feel free to let us know wherever you need our assistance.

Regards!