'Support for accessing an <IMG> element inside a form, by name'

[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kfm-devel
Subject:    Support for accessing an <IMG> element inside a form, by name
From:       David Faure <david () mandrakesoft ! com>
Date:       2001-09-21 18:25:33
[Download RAW message or body]

This is quite strange, and I can't find it in the specs, but this seems to
be possible, both under IE and NS : if a <form> element contains for instance
an <img> element, it is possible to access it by name from javascript.
For instance:

<form name="test">
  <input type="text" name="textchild" value="">
  <img name="imgchild" width="20" height="20">
</form>

document.test.imgchild returns the img element (!)
What's more this element isn't in the form's "elements()" array !

I wondered if this means it's always possible to access a child element
by name, but no, with e.g. table and td, it doesn't work.
What's more, it also works if the <img> is further nested inside the <form>
tag, e.g. <form><table><td><img name="imgchild"></td></table></form>,
so this isn't about direct children (not surprising for <form> though).

The next question is, what type of elements can be accessed this way
(with "form.blah" and not being inside the elements array). I have tried
some other elements (<a>, <div>, <table>, <td>... no idea what else to try...).
It doesn't work. Only <img> seems to work this way (!!). I must be missing something.....

Now how should I implement this ? A clean HTMLCollection (given by the
form element, containing the images), or a dirty getElementsByTagName
[assuming it's recursive], from which I select the one with the appropriate
name ? The notion of clean for such a dirty trick is a bit flawed anyway :}

(Testcase attached)

-- 
David FAURE, david@mandrakesoft.com, faure@kde.org
http://perso.mandrakesoft.com/~david/ , http://www.konqueror.org/
KDE, Making The Future of Computing Available Today

["hmmm.html" (text/html)]

<HTML>
</BODY>
<form name="myform">
  <input type="text" name="textchild" value="">
  <table name="mytable">
    <td name="mytd">
      <img name="imgchild" width="20" height="20">
    </td>
  </table>
  <input type="hidden" name="hiddenchild" value="">
</form>
<script name="myscript" language="javascript">
  document.write("document.myform.textchild=" + document.myform.textchild + "<BR>");
  document.write("document.myform.imgchild=" + document.myform.imgchild + "<BR>");
  document.write("document.myform.mytable=" + document.myform.mytable + "<BR>");
  document.write("document.myform.mytd=" + document.myform.mytd + "<BR>");
  document.write("<P>Contents of document.myform.elements:<BR>");
  for ( var i = 0 ; i < document.myform.elements.length; i++ ) {
    document.write(i + " - " + document.myform.elements[i].name + "<BR>");
  }
</script>
</BODY>
</HTML>


[prev in list] [next in list] [prev in thread] [next in thread]
Configure | About | News | Add a list | Sponsored by KoreLogic