We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

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

glass_snake
glass_snake asked
on
Medium Priority
212 Views
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?

====================================

<HTML>
   <HEAD>
      <title>JavascriptControlProblem</title>
   </HEAD>
   <body>
      <form id="Form1">
            <input type="text" id="fieldA"><br>
            <input type="text" id="fieldB"><br>

            <table>
               <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>
            </table>
           
         <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.id + ' --- ' + ctl.offsetLeft + ', ' + ctl.offsetTop);
                  }
               }
         </script>
     
      </form>
     
   </body>
</HTML>
Comment
Watch Question

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Jens FiedererTest Developer/Validator

Commented:
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]) {
                              break;
                        }
                        alert(ctl.outerHTML + ' -' + j + ' - ' + ctl.offsetLeft + ', ' + ctl.offsetTop);
                        j++;
                  }
            }
      }
</script>

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.
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:

Commented:
I knew that jensfiederer but Im to lasy so thanks :D
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.