this.form object

[mike]

I'm drawing a blank on this.

I have html like:

<form name="test1">
<input name="inp1" onclick="alert(this.parent.form);">
<a href="javascript:void(null);"
onclick="alert(this.parent.form);">click</a>
</form>

when I click the input I get [object], when I click the link I get
undefined.

I want to get the [object] when I click on the link and obviously
missing something.

Mike

[Thomas 'PointedEars' Lahn]

mike wrote:

I have html like:

<form name="test1">
<input name="inp1" onclick="alert(this.parent.form);">
<a href="javascript:void(null);"
onclick="alert(this.parent.form);">click</a>
</form>

when I click the input I get [object], when I click the link I get
undefined.

I want to get the [object] when I click on the link and obviously
missing something.

`a' elements that are descendants of `form' elements are not part of
the forms element's collection nor do they have a `form' property;
in short, apart from their position in the parse tree, there is no
connection between link and form in the DOM.

I wonder even why `this.parent' works in the first place. Maybe in IE,
as a proprietary property of its DOM, certainly not the W3C DOM
(Moz/FF/Opera) -- that would be `parentNode'.
PointedEars

[Matt Kruse]

mike wrote:

<input name="inp1" onclick="alert(this.parent.form);">
Try:
this.form
(every input has a 'form' property which refers to the form containing it)
<a href="javascript:void(null);"
onclick="alert(this.parent.form);">click</a>

Try:
this.parentNode
(the parent node *is* the form tag)

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[mike]

>`a' elements that are descendants of `form' elements are not part of

the forms element's collection nor do they have a `form' property;
in short, apart from their position in the parse tree, there is no
connection between link and form in the DOM.

Bummer, so if I knew the form name like:

<a href="javascript:void(null);"
onclick="myfunc('test2')">click</a>

function myfunc(obj)
{alert(document.obj);}

but I get undefined, what I want is [object].

alert(document.form[obj]);

does not work either

[mike]

this.parentNode works in that example, but if I have

<form>
<table>
<tr><td>
<a href="javascript:void(null);"
onclick="alert(this.parentNode);">click</a>
</td></tr>
</table>
</form>

then I don't think it will. I think it returns the td tag object,
right?

[Evertjan.]

mike wrote on 19 okt 2005 in comp.lang.javascript:

function myfunc(obj)
{alert(document.obj);}

but I get undefined, what I want is [object].

an object is not it's name.

if obj is an object:

alert(obj) gives [object]
alert(document.obj) gives undefined.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

>an object is not it's name.

if obj is an object: alert(obj) gives [object]
alert(document.obj) gives undefined.

Using a link I need to pass to a function the form object.

In my example I had:
<a href="javascript:void(null);" onclick="myfunc('test2')">click</a>

in the function:
function myfunc(obj) {alert(obj);}

I would get "test2". What I want to get is [object], which is the
object of the form test2.

Make sence?

[mike]

If I do this:

<form name="test1">
<table>
<tr><td>
<button onClick="alert(this.form);alert(this.form.name);"> Click
Me</button>
</td></tr>
</table>
</form>

then I get [object], test1.

Yep, i am using IE. the <a> tag doesn't give me the form, but the
button does.

[Michael Winter]

On 18/10/2005 23:00, mike wrote:

[snip]

<a href="javascript:void(null);"
Do not use the javascript: pseudo-scheme in href attributes. See
<URL:http://www.jibbering.com/faq/#FAQ4_24>.
onclick="myfunc('test2')">click</a>

function myfunc(obj)
{alert(document.obj);}
That would display the value of the obj property of the document object,
type-converted to a string.
but I get undefined, [...]
Because there is no such property.
alert(document.form[obj]);
That would attempt to display, assuming the call shown at the start of
your post, the test2 property of the form object in the document object.
That is, it's equivalent to:

alert(document.form.test2);
does not work either

That's because there's no form property, but you are closer. :)

All form controls have a form property. As you now know, this is an
object reference to the FORM elements that contains the control.

The document object has a forms (notice the 's') property that is a
collection of all FORM elements in the document. This collection can be
indexed by id, name, or ordinal number. So, to access a form with the
name or id attribute value, test2, one would write:

document.forms.test2

If the identifier was a string value in a variable, that would be
altered to:

document.forms[myFormId]

See <URL:http://www.jibbering.com/faq/faq_notes/form_access.html> for
more information on accessing forms and form controls.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[mike]

yes this is what i was looking for:

document.forms[myFormId]

about your comment on:

<a href="javascript:void(null);"

what do you suggest I use? buttons are too big and take up valuable
real estate on the page. I guess I could use more images. users know
that links are "clickable"

[RobG]

mike wrote:

If I do this:

<form name="test1">
<table>
<tr><td>
<button onClick="alert(this.form);alert(this.form.name);"> Click
Me</button>
</td></tr>
</table>
</form>

then I get [object], test1.

Yep, i am using IE. the <a> tag doesn't give me the form, but the
button does.

This is not a browser problem. The A element is a descendant of the
form, but the form is not its parent any more than your great
grandmother is one of your parents.

Form controls have a property called 'form' that refers to the form they
belong to. An A element can't be a form element and so doesn't have a
form property by default. But it can be a descendant of a form.

The script [1] below demonstrates how to find a form ancestor of any
element if there is one.

The other problem you have is trying to use the form's name to get a
reference to it. You need to use the *forms* collection:

var refToTheForm = document.forms['theForm'];

// or
var refToTheForm = document.forms.theForm;

// or (not liked)
var refToTheForm = document.theForm;
[1]
<script type="text/javascript">

function getForm(el)
{
while (el.parentNode && 'form' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
if ('form' == el.nodeName.toLowerCase()) {
return el;
}
return false;
}
</script>

<form name="theForm" action="">
<table><tr><td>
<a href="#" onclick="
var x = getForm(this);
alert( (x && x.name) || 'Can\'t find the form');
return false;
">Show form element name</a>
</td></tr></table>
</form>
--
Rob

[RobG]

mike wrote:

yes this is what i was looking for:

document.forms[myFormId]

about your comment on:

<a href="javascript:void(null);"

what do you suggest I use? buttons are too big and take up valuable
real estate on the page. I guess I could use more images. users know
that links are "clickable"

One option of many:

<style type="text/css">
.clickMe {
cursor: pointer;
color: #2222ff;
text-decoration: underline;
}
</style>

<span class="clickMe"
onclick="alert('I\'m clicked!!');">Hey, click me</span>


--
Rob

[mike]

Rob, good points ......

[Thomas 'PointedEars' Lahn]

mike wrote:

about your comment on:

<a href="javascript:void(null);"

what do you suggest I use? buttons are too big and take up valuable
real estate on the page. [...]

They don't if you know how to style them with CSS which is Web authoring
basics. And even more important, appropriate server-side processing of
form data provided, they work without client-side script support while
script links do not.
PointedEars

[Thomas 'PointedEars' Lahn]

mike wrote:

[...] if I have

<form>
<table>
<tr><td>
<a href="javascript:void(null);"
onclick="alert(this.parentNode);">click</a>
</td></tr>
</table>
</form>

[...] I think it returns the td tag object, right?

The `td' element (HTMLTableCellElement) object, if the W3C DOM is supported.
Why don't you check the tagName or compare the object references?
PointedEars

[Thomas 'PointedEars' Lahn]

RobG wrote:

Your example probably works, because the code matches exactly the markup.
However, to make things safer, I'd prefer at the least

<script type="text/javascript">

function getForm(el)
{ if (el)
{ while (el.parentNode && 'form' != el.nodeName.toLowerCase()){
el = el.parentNode;
} if (el && 'form' == el.nodeName.toLowerCase()) {
// if the element is not within a `form' element,
// `el' does not point to an element object return el;
} } return false;
}
</script>

<form name="theForm" action="">
<table><tr><td>
<a href="#" onclick="
var x = getForm(this);
alert( (x && x.name) || 'Can\'t find the form');
return false;
">Show form element name</a>
</td></tr></table>
</form>

PointedEars