PDA

View Full Version : Can I reference to a form object by its html-tag name ?



chros
03-29-2006, 12:46 PM
A simplified situation, when I reference the textarea by id from the onClick() event:

<form name="news" method="post" action="">
<textarea name="msg" cols="60" rows="15" id="msg">
<input type="button" name="b1" id="b1" value=" U " onclick="doSomething(this.form.msg)"
</form>
The doSomething() function is in an outer file.
I want my code as much as portable as it can, so I would like to refence the textarea by html-tag name: eg this.form.textarea . (because I think, in my case, 1 form has only 1 textarea). So when I copy this code to another html file, I don't have to rewrite the parameter (you may say, that it's not a problem, but when I have lot of button, it is.)

Or is there any simple solution for this ?

Thanks

Twey
03-29-2006, 02:55 PM
A much better idea (and a much more portable one) would be to pass the textarea as another argument to doSomething().
However, yes, you can reference the textarea as this.form.getElementsByTagName("textarea")[0].

mwinter
03-29-2006, 03:07 PM
A simplified situation, when I reference the textarea by id [...]If a form control is placed within a form element, it's better to use the name attribute value; more portable. The id attribute is of lesser value for identification in this situation, though by all means include one for other purposes (like style sheets).

Mike

jscheuer1
03-29-2006, 03:22 PM
In your example the textarea and the input tags are both invalid. The textarea has no closing tag and the input tag is malformed, no closing '>'. Try this:


<form name="news" method="post" action="">
<textarea name="msg" cols="60" rows="15" id="msg">Hey</textarea>
<input type="button" name="b1" id="b1" value=" U " onclick="alert(this.form.elements[0].value)">
</form>

This depends upon the textarea being the first element in the form, if your function looks like so or has similar language:


<script type="text/javascript">
function alertArea(form){
for (var i_tem = 0; i_tem < form.elements.length; i_tem++)
if (form.elements[i_tem].tagName.toLowerCase()=='textarea'){
alert (form.elements[i_tem].value)
break;
}
}
</script>

It will find the first textarea in the form. Your markup could be like so:


<form name="news" method="post" action="">
<textarea name="msg" cols="60" rows="15" id="msg">Hey</textarea>
<input type="button" name="b1" id="b1" value=" U " onclick="alertArea(this.form)">
</form>

Twey
03-29-2006, 03:25 PM
<script type="text/javascript">
function alertArea(form) {
for (var i_tem = 0; i_tem < form.elements.length; i_tem++)
if (form.elements[i_tem].tagName.toLowerCase()=='textarea') {
alert (form.elements[i_tem].value)
break;
}
}
</script>However, using the native getElementsByTagName() method is more efficient.

jscheuer1
03-29-2006, 03:27 PM
However, using the native getElementsByTagName() method is more efficient.

Not as x-browser.

Twey
03-29-2006, 03:36 PM
True.
<script type="text/javascript">
function alertArea(form) {
if(typeof form.getElementsByTagName != "undefined")
alert(form.getElementsByTagName("textarea")[0].value);
else for (var i_tem = 0; i_tem < form.elements.length; i_tem++)
if (form.elements[i_tem].tagName.toLowerCase()=='textarea') {
alert (form.elements[i_tem].value);
break;
}
}
</script>

jscheuer1
03-29-2006, 04:20 PM
True.
<script type="text/javascript">
function alertArea(form) {
if(typeof form.getElementsByTagName != "undefined")
alert(form.getElementsByTagName("textarea")[0].value);
else for (var i_tem = 0; i_tem < form.elements.length; i_tem++)
if (form.elements[i_tem].tagName.toLowerCase()=='textarea') {
alert (form.elements[i_tem].value);
break;
}
}
</script>

That's good, Twey - a little complicated as an example perhaps but, much more efficient looking and probably is more efficient. I am no expert on code efficiency though. I was a little worried that the OP might not be able to follow my version, hopefully, with the full discussion of this thread, what is being done will all be clear.

Twey
03-29-2006, 04:32 PM
I am no expert on code efficiency though.Nor am I, when it comes to Javascript :) However, a native implementation will always be faster than one written in Javascript, for the simple reason that it doesn't have to be interpreted.

chros
03-30-2006, 05:10 AM
Thanks for the answers, I'll reply them in the afternoon. (It's early morning here :) )

chros
03-30-2006, 03:08 PM
A much better idea (and a much more portable one) would be to pass the textarea as another argument to doSomething().
However, yes, you can reference the textarea as this.form.getElementsByTagName("textarea")[0]
Thank you, works like a charm! The other solution is look like a bit "over-weighted" for my problem.

Not as x-browser
What is x-browser ? I have never heard of it.

it's better to use the name attribute value; more portable. The id attribute...
Yes I know, but I'm using this with php environment, where it's easier to reference the fields of the form as HTML arrays (eg: <textarea name="userform[msg]" ...)

In your example the textarea and the input tags are both invalid.
I have written by hands, so maybe a missplelling had occured. In the html is correct, but thanks anyway.

Btw: can I reference in the outer script to the current form, from the outer script function was called ? (so I don't have to pass the form to the doSomething function either) I have tried this, but isn't working:

outer file:
doSomething() {
var theForm = this.form;
var theTextarea = theForm.getElementsByTagName("textarea")[0];
}
I know that the "this" has no meaning in this context...

Twey
03-30-2006, 03:15 PM
I know that the "this" has no meaning in this context...Depends how the function is called. Pass the form as an argument to the function.

jscheuer1
03-30-2006, 03:46 PM
x-browser is short for cross browser compatible.

BTW (short for by the way) get your quotes straight. I believe I am the one who mentioned that your markup was invalid though Mike may have mentioned it too but, not in this thread that I can see. It wasn't a matter of misspelling either. It was a matter of a missing > and a missing end tag, neither are spelling errors and are important in so far as enabling the script to find your elements:


In your example the textarea and the input tags are both invalid. The textarea has no closing tag and the input tag is malformed, no closing '>'. Try this:


<form name="news" method="post" action="">
<textarea name="msg" cols="60" rows="15" id="msg">Hey</textarea>
<input type="button" name="b1" id="b1" value=" U " onclick="alert(this.form.elements[0].value)">
</form>

chros
03-30-2006, 05:48 PM
I have came across vBulletin's (v3.5.4) 'vbulletin_global.js' file, and here is their solution for getElementsByTagName :

/**
* Function to emulate document.getElementsByTagName
*
* @param object Parent tag (eg: document)
* @param string Tag type (eg: 'td')
*
* @return array
*/
function fetch_tags(parentobj, tag)
{
if (typeof parentobj.getElementsByTagName != 'undefined')
{
return parentobj.getElementsByTagName(tag);
}
else if (parentobj.all && parentobj.all.tags)
{
return parentobj.all.tags(tag);
}
else
{
return null;
}
}

jscheuer1
03-30-2006, 09:47 PM
That's good but one need not limit oneself in that manner when working with forms. There are some browsers that can't handle either the document.all collection or the getElementsByTagName array but all can do the form.elements collection.