Hi there, I am wanting to find out how to add text to a hidden field in a HTML form. I want to add text from an array, the array holds the information for the caption placeholder for the images.

Basically i have an image viewer which lets you scroll through images and they have a text caption below them telling what the images are. When the user clicks an image this brings up the form and hides the imageViewer. I want the caption of the image clicked to automatically be entered into the hidden field of the form when a user decides to choose a particular photo, so that it sends this to the server script for processing.

At present i have the function

function insertText()
		document.getElementById('camera').value = document.getElementById('captionElement').value;

i have commented some out to try various things.

My form input box has an id="camera" and i was told to do something like this. Give the hidden element an id="someName"...then in the JS you can change the value of it by the usual way...
getElementById('someName').value=??? where ??? is the name of the camera the user has

I have been messing about now for hours and just can't get it. I really hope someone can help me out. Im new to this by the way :)

Thanks again

7 Years
Discussion Span
Last Post by colerainescotty


I have to ask why you might want to send image captions back to the server?

The reasons I ask are that :

  • Captions are not necessarily unique. In a typical gallery for example, you could have a whole string of images with the caption "Sports Day".
  • The server should have the means of enquiring (typically from a database) the caption for each image. It must have done this to serve the gallery in the first place.

It would therefore be more normal to address each image by a unique identifier (UID), this being the primary key (or a derivative of it) against which the image is stored in the database. Less typically, the UID might be the directory/file path in which the image is stored on the server.

There are various ways to do this. Personally I would arrange for the click associated with each image to pass the image's UID to the handler function as an argument. eg. onclick="handleImageClick(12345)" . The function would then be of the form

function handleImageClick(uid){
    // whatever ...
    document.getElementById('imageID').value = uid;
    // whatever ...


This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.