Display image in RSFORM after passing it through URL

Question

So far i have been able to pass a K2 image into both a textbox and a hidden field of RSFORM - which is great! But i would like the user to view the item (image) they are ordering while filling the form.

I came across this topic with this solution:

<form action="#" method="post">
  <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
  <input type="button" value="Show Image" id="btn1" />
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
  document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />';
});
</script>

The solution above is slightly similar to what i want only that i want my image to be viewed before submission and to be submitted as well.

My Thoughts: I think using the rsform hidden field to catch the image and then passing it to an <img src="" /> tag using java-script for it to be displayed may work as in the example above.

Please, i need your kind assistance in solving this and if you need more clarifications to the problem, let me know.

Thanks in advance!

Answer 1

You should be able to do this with PHP using the "Scripts called on form display" section. The basic steps would be:

1. Set variable to the image path you are passing (ie $_GET, etc)
2. Set variable to the placeholder image value

3. Do a find/replace using the syntax below:

   $formLayout = str_replace($find,$replace,$formLayout);

Answer 2

Thanks for your answer

This worked perfectly:

<script>
document.addEventListener('DOMContentLoaded', function(){
  document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('fieldname').value +'" alt="Image" />';
});
</script>

Enter this in the script section of your form and disable the auto layout generation in rsform and place this <div id="photo"></div> where you want your image to appear in the form then replace fieldname in the code with the name of your field.