Take the 2-minute tour ×

I have a HTML table inside which I have a submit button. Now, I call a function in my JavaScript file, that is supposed to create a captcha, and place it in the HTML page within the table where I have the submit button.

And in the JavaScript, I am doing a document.write() and pasting the image from the JavaScript file into the HTML page. Now I want both this image and submit inside the same table, but the submit needs to be on the HTML page and the image has to be in the JavaScript file only. Unfortunately, the image is pasted somewhere at the bottom of the page. I don't understand how this positioning works. Is there any solution where I can put them into the same table, in spite of both controls being in separate files?

Sample code:

in the HTML page: the submit button is placed inside a table in the form tag...

in the JavaScript file:

document.write("img position=\"relative\" src=\"" + decodeURIComponent(imgdir) + imgid + ".jpg\" height=\"50\" width=\"100\" align=\"left\" style=\"margin-left: 4px;\" height=\"80\");
share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

You could try to define the html img tag where you want it in the table, and just hide it in css style until you set the source with your javascript. You also need to set id on it to get access in the javascript.

In the table you define the html table cell like this:

  <!-- Your submit button goes here... --> 
  <img id="imagePlaceholder" style="display:none;margin-left:4px;" height="50" width="100" align="left" /> 

In the javascript you do this:

var image = document.getElementById("imagePlaceholder");
image.src = decodeURIComponent(imgdir) + imgid + ".jpg" ;
image.style.display = "inline";  // Make the image tag visible
share|improve this answer
Thanks a lot! this works:) –  Geethapriya Aug 25 '09 at 5:31
add comment

document.write() appends HTML to the end of the page. You probably want to use something like appendChild() to insert your image into the right table cell. For example:

var img = document.createElement('img');
img.src = decodeURIComponent(imgdir) + '.jpg';
// set the rest of the attributes...
var imgTd = document.getElementsById('imgDestination');

Some suggestions:

  • Use a JavaScript library like jQuery—it makes stuff like this trivial.
  • Move the image's styling off of the element and into a <style> element or an external CSS file.
share|improve this answer
About the styling: In this case, it looks like the Margin-left:4px is special to this particular image, and not a general styling for all images, so it would be overkill to take it out and place it in a style tag or separate css file. But for general styling, this is a valid point. –  awe Aug 21 '09 at 12:26
@awe: Overkill, perhaps, but I like to keep my styling separate from the markup. –  Chris Zwiryk Aug 21 '09 at 12:37
add comment

In addition to the prior comment I would strongly avoid the use of document.write as it is so easily abusive to the semantics of the HTML. I would suggest always using innerHTML to write elements and fill them dynamically. innerHTML is not a standard, but it is 2.5 to 3.5 times faster than using DOM methods. I also strongly suggest validation your dynamically generated HTML to discover flaws introduced by your JavaScript.

share|improve this answer
add comment

Your Answer


