Radio Button Images

  • Profile Image
    slross
    Asked on May 06, 2014 at 03:18 PM

    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

  • Profile Image
    EltonCris
    Answered on May 06, 2014 at 04:36 PM

    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!

  • Profile Image
    slross
    Answered on May 06, 2014 at 05:04 PM

    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

  • Profile Image
    BDAVID
    Answered on May 06, 2014 at 07:45 PM

    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.

  • Profile Image
    abajan
    Answered on May 06, 2014 at 08:32 PM

    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

  • Profile Image
    slr2
    Answered on May 07, 2014 at 03:09 AM

    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

  • Profile Image
    slr2
    Answered on May 07, 2014 at 03:11 AM

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

    Thx Stuart

  • Profile Image
    gori-mathew
    Answered on May 07, 2014 at 04:20 AM

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

    Regards!