Insert a dynamic image link in HTML using a form field value

  • fdsconsult
    Asked on December 11, 2018 at 9:06 AM

    Hi

    I have dropdown menu with codes; which I then pass to a text field:


    <p><img src="https://s3.eu-west-2.amazonaws.com/fdscdn/ersCode{whichSystem}.png" /></p>


    if i dont have this as HTML then I can see the correct URL, but obviously not the image:

    When I place as HTML Code I get this:


    1544537052Screenshot 2018 12 11 at 14 Screenshot 10

    So everything after the } is lost and the link not recognised as a image.


    Is this fixable? Is there an escape character or similar that I can use so that I can update my URL to show different images in the same text box based on my dropdown?


    Thanks in advance!

  • jonathan
    Replied on December 11, 2018 at 12:44 PM

    Can you please confirm first that what you were trying to do was dynamically embed an image using its source link into the TEXT field from Dropdown list option?

    If it was, as far as I know it does not work for image source link.

    There are some parse script involve in the source field {tags} which eliminates some codes. This causes the source link to be broken.

    It will only work if the source field's data are plain text value.


  • fdsconsult
    Replied on December 11, 2018 at 3:59 PM

    Hi


    Yes that is what I was trying to do. Even if I change the choice to the image source:


    1544561812Screenshot 2018 12 11 at 20 Screenshot 10

    This then passes the correct HTML, without any issues:


    1544561877Screenshot 2018 12 11 at 20 Screenshot 21

    So you can see that the HTML is correctly rendered but the image is still not shown.  If I place this in a simple HTML directly it will display the image.


    Can you think of anything I can do (other than having lots of hidden fields with the images hardcoded?)

    Thanks

    Iain

  • jonathan
    Replied on December 11, 2018 at 6:00 PM

    The very key here that was causing the issue is that the Dropdown fields cannot have selection options that contains tags, html codes, or any script like elements.

    Example, the value below will not work on Dropdown list selection options.

    <p><img src="https://s3.eu-west-2.amazonaws.com/fdscdn/ersCode{whichSystem}.png" /></p>

    I assumed this was the form https://www.jotformeu.com/form/83424861481359 you are working on.

    If I understand correctly, you want to dynamically show images/pictures on the form base on the selected option from the Dropdown list.

    You can actually do it using the Image field instead. You can show/hide images using Conditions. So you do not need to use script/html codes as values in the Dropdown list option.

    Just use proper values(plain text) in the Dropdown list option, and then create condition rules that will show/hide the images fields base on the selected answer.

     This will indeed require multiple images fields in the form as you will show/hide those images using conditions to create the illusion that images were changing base on the selected answer from Dropdown list.