?
Solved

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

Posted on 2006-03-31
4
Medium Priority
?
198 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>
0
Comment
Question by:glass_snake
  • 2
4 Comments
 
LVL 9

Accepted Solution

by:
Lakio earned 2000 total points
ID: 16346797
0
 
LVL 23

Expert Comment

by:Jens Fiederer
ID: 16346835
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.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16346838
0
 
LVL 9

Expert Comment

by:Lakio
ID: 16346871
I knew that jensfiederer but Im to lasy so thanks :D
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

839 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