formidable

FFF Formidable Community Question
Image appears once you select an item using the three Lookup Fields below


Here's the code in the custom HTML field that makes this work:

< and > are omitted so code displays instead of running (obviously)

script type="text/javascript"

jQuery(document).ready(function($){

$('#field_i946u').change(function(){

var new_src = $("#field_i946u").val();

const replace_src  = document.querySelector("#first_image");

replace_src.setAttribute("src", new_src);

});

});

/script

// #field_i946u is the Lookup Field result containing the URL for the image src

// #first_image is the ID of the img tag... I could not get this code to work using the ID of the HTML field instead, which is "frm_field_12890_container"

NOTES:

Using the ID in the image tag (i.e. #first_image) to find and replace the src obviously won't work in a repeater field.

However, as I mentioned above, I cannot figure out how to select the HTML field using its field ID to then replace the src.

Therefore, I added the ID for the image, just to demonstrate what I'm trying to do, not how I think it should be done.

Also, I am not concerned that the holding image does not display when the page is loaded. I can get around that another way. It is interesting that the holding image DOES display when the HTML field is inside a repeater field... but this is not a problem


This is a repeater field with the same setup as above

Here's the code for the image in the repeater field, which, obviously, does not work:

script type="text/javascript"

jQuery(document).ready(function($){

$('#field_4elnp').change(function(){

var new_src_2 = $("#field_4elnp").val();

const replace_src2  = document.querySelector("#second_image");

replace_src2.setAttribute("src", new_src_2);

});

});

/script

// #field_4elnp is the Lookup Field result for the URL

// #second_image is the img tag ID for the image