positioning inside a html table.

Question

Hi,

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, am doing a document.write() and pasting the image from the js 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. Am pretty new to this and i dont understand how this positioning works. Is there any solution where, i can put them into the same table, inspite 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\"); }

Thanks, Geetha

Answer 1

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.

Answer 2

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:

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

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

Answer 3

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');
imgTd.appendChild(img);

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.