Input field x,y co-ordinates when in a table

Posted on 2006-03-31
Last Modified: 2012-06-27
I'm working on a JavaScript that will determine the physical location of the input fields on a page.  My script works perfectly fine under most circumstances.  However, if the input field is located inside of a table, the script returns a really odd location for the field.  I've included a very simple page below that demonstrates what I'm talking about.

Does anyone have any insight on why it's doing this and how I can fix it?


      <form id="Form1">
            <input type="text" id="fieldA"><br>
            <input type="text" id="fieldB"><br>

               <tr><td><input type="text" id="field1"></td></tr>
               <tr><td><input type="text" id="field2"></td></tr>
               <tr><td><input type="text" id="field3"></td></tr>
               <tr><td><input type="text" id="field4"></td></tr>
               <tr><td><input type="text" id="field5"></td></tr>
         <script language="javascript">
               var ctl;
               for(i=0; i<document.forms[0].elements.length; i++){
                  if (document.forms[0].elements[i].type == 'text') {
                     ctl = document.forms[0].elements[i];
                     alert( + ' --- ' + ctl.offsetLeft + ', ' + ctl.offsetTop);
Question by:glass_snake
    LVL 9

    Accepted Solution

    LVL 23

    Expert Comment

    by:Jens Fiederer
    I think Lakio has the solution for your problem.

    The EXPLANATION for your problem is that the offsets are from the PARENT element.  So if you run

         <script language="javascript">
          var ctl;
          for(i=0; i<document.forms[0].elements.length; i++){
                if (document.forms[0].elements[i].type == 'text') {
                      ctl = document.forms[0].elements[i];
                      alert(ctl.outerHTML+ ' --- ' + ctl.offsetLeft + ', ' + ctl.offsetTop);
                      var j = 1;
                      for (ctl = ctl.parentNode; ctl; ctl = ctl.parentNode) {
                            if (ctl == document.forms[0]) {
                            alert(ctl.outerHTML + ' -' + j + ' - ' + ctl.offsetLeft + ', ' + ctl.offsetTop);

    instead you will see how for any one element, the real position in the form is the sum of the positions going up toward the form.
    LVL 63

    Expert Comment

    LVL 9

    Expert Comment

    I knew that jensfiederer but Im to lasy so thanks :D

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    Article by: DanRollins
    This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now