2

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!

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);

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.