How to add images to HTML forms?

In which directory should I put the source of the image? and how can I specify this directory in the HTML form? Thank you

@hossam, I’m sorry you haven’t received an answer to this question before now. I have added images to forms before. I ran an Apache web server and hosted the image file there, but called it from my HTML Form with the standard <img> tag. I don’t think there is natively a place you can host images in OpenMRS.

In your JavaScript code that handles the clicking of the image, you should be able to us the setValue() function to set the values of the fields in the form based on what gets clicked in the image. You can find documentation for the setValue() function at… https://wiki.openmrs.org/display/docs/HTML+Form+Entry+JavaScript+Reference

When you get this to work, it might be helpful to others if you add a comment to the JavaScript Reference page explaining how you did it, with sample code, etc.

I hope this gives you a starting point if you were stuck.

1 Like

Hi @hossam

It’s generally a good practice to put all your images in a designated folder for images, in most webapps it is /img/ or /images/, you can link to this directory in the html form like this.

<img src="/img/image.jpg" width="" height=""/>

Or, you can use CSS to add an image to your form, both ways will work depending on your need. #form { background-image: url(img/image.jpg); }

Like @arbaughj said, you can use the SetValue() function in JavaScript

If you need anymore help refer to these sources:

http://www.w3schools.com/cssref/pr_background-image.asp

AFAIK there is no centralized places for images, and if you look around the repo, you may be able to find it. if you have a link to the issue you are working on, I might be able to find the image directory.

1 Like

@arbaughj I’m so happy to hear from you.It’s been a while :smile: as usual, thank you!

@syedahmed I will try that and let you know how things turn out. Thank you!

1 Like