getElementByName within containing DIV

[DanWeaver]

Hi Herbert,

Yes thats exactly it- I don't want absolute references-
I think I have to go with:

function hmmfunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByTagName('input');
x[0].value="newvalue"
}

I get script errors for references like var x=moo.childNodes; or
var x= moo.getElementsByTagName('input'); or var x=
document.moo.getElementsByTagName('input');

I know the above solution will be anathema to Thomas- he rightly
points out that Im finding the parent and then finding it again, but I
have spent hours on this little piece of code alone and have about 100
other similar pieces to sort out.

The principal reason I dont like my (or your!) solution Herbert is
that I ALREADY KNOW the element (by name) within the div that I want-
it seems crazy to create an array of either all child nodes or all of
a particular tagname to then extract the wanted element when you know
the element name.

D

 

[SAM]

DanWeaver a écrit :

Hi Herbert,

Yes thats exactly it- I don't want absolute references-
I think I have to go with:

function hmmfunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByTagName('input');
x[0].value="newvalue"
} (snip)
I ALREADY KNOW the element (by name) within the div that I want

So, why don't you use the correct name, to say 'inputbox'
instead of 'input' ... ?

it seems crazy to create an array of either all child nodes or all of
a particular tagname to then extract the wanted element when you know
the element name.

not so much ... the arrays (DOM) of all what you want are existant as
soon as the page is displayed, why to do not use them ?

function hmmfunc(ref)
{
while(ref.tagName != 'DIV') ref = ref.parentNode;
ref.getElementsByTagName('input')[0].value = "newvalue";
}

<div>
<img src="p_1.gif" onclick="hmmfunc(this)" alt="button"><input>
</div>
<div>
<img src="p_2.gif" onclick="hmmfunc(this)" alt="button"><input>
</div>



To get the element by its name is not so easy because :
- getElementByName
is not supported in most browsers

So you'll have to use :
- getElementsByName
that gives too (as getElementsByTagName) a collection of objects

function hmmfunc(ref)
{
while(ref.tagName != 'DIV') ref = ref.parentNode;
if(getElementByName)
ref.getElementByName('inputbox').value = "newvalue";
else if(getElementsByName)
ref.getElementsByName('inputbox')[0].value = "newvalue";
}

 

[Lasse Reichstein Nielsen]

function hmmfunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByTagName('input');
x[0].value="newvalue"
}

I get script errors for references like var x=moo.childNodes; or
var x= moo.getElementsByTagName('input'); or var x=
document.moo.getElementsByTagName('input');

Ofcourse, if moo is an id, not an element. If you changed the
first line to
var moo = ref.parentnode;
then moo.childNodes, moo.getElementsByTagName('input') etc. woudl work.

The principal reason I dont like my (or your!) solution Herbert is
that I ALREADY KNOW the element (by name) within the div that I want-
it seems crazy to create an array of either all child nodes or all of
a particular tagname to then extract the wanted element when you know
the element name.

Knowing the name only helps if there *exists* a way to look up elements
by name. If not, you need alternatives.

/L

 

[Thomas 'PointedEars' Lahn]

[...] my javascript level [...] is, however, swiftly improving).

That's good to hear

To improve your Usenet level as well: from now on, please quote the relevant
*minimum* of what you are replying to, and reply below those trimmed quotes,
as you can see here.

http://www.jibbering.com/faq/faq_notes/clj_posts.html

I tried your solution...

<form action="" onsubmit="return handleSubmit(this)">...

[...]
I think the "return false;" prevents the submission so that seems ok,
however, there are other buttons within each of the divs performing
different operations. Anytime another similar button is pressed this
function will fire, right?

That depends on what you mean by "similar button". The function will only
be called for all *submit* buttons --

<input type="submit" ...>
<input type="image" ...>
<button type="submit" ...>...</button>

--, of course.

I need to get a handle on the appropriate inputbox without 'tying up' the
forms.

Why, you may return `true' in handleSubmit() whenever form submission
through such a button is required. It would therefore be prudent to reset
the property to a neutral value when the respective buttons are activated.
Reviewing my solution[1], event bubbling[2] would come in handy here:

<form action="..."
onclick="if (typeof event != 'undefined') handleFormClick(event)"
onsubmit="if (typeof event != 'undefined')
return handleFormSubmit(this)">

<script type="text/javascript">
function handleFormClick(e)
{
if (e)
{
var t = e.target || e.srcElement;

var isButton = (t && /\s*(input|button)\s*/i.test(t.tagName)
&& /\s*(submit|image)\s*/i.test(t.type)
&& typeof t.id == "string");

handleSubmit.inputID = isButton
? "input_" + t.id.replace(/^button_/i, "")
: "";
}
}

function handleFormSubmit()
{
var targetID = arguments.callee.inputID;
if (targetID)
{
var o = document.getElementById(targetID);
if (o)
{
o.value = "newValue";
return false;
}
}

return true;
}
</script>

<fieldset>
<legend>one</legend>
<input id="button_one" type="image" src="action.gif" alt="action">
<input id="input_one" name="inputbox">
</fieldset>

<fieldset>
<legend>two</legend>
<input id="button_two" type="image" src="action.gif" alt="action2">
<input id="input_two" name="inputbox">
</fieldset>
</form>

Let's call that Wheel 0.9.7 ;-)


PointedEars
___________
[1] <[2] See <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow>
(currently just a Working Draft, but it provides an image to explain the
event flow, in contrast to the text-only explanation of the current
standard,
<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow>).

 

[Jambalaya]

Id like to get a handle on an input box which has the same parent as
the
anchor activating the function...
I have the following HTML:

<div id="Div0">
<a id="A1" onclick="HmmFunc(this);">
<img src="action.gif" />
</a>
<input id="input_one" name="inputbox" />
</div>
[snip]

function HmmFunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementByName('input');
x.value = "newvalue"
}

[snip]

If you are able to remove the whitespace between the anchor and the
input like:

<div id="Div0">
<a id="A1" onclick="HmmFunc(this);">
<img src="action.gif" />
</a><input id="input_one" name="inputbox" />
</div>

then you could use a function like:

function HmmFunc(ref) {
var x = ref.nextSibling;
if (x) x.value = 'newvalue';
}

 

[DanWeaver]

Thanks all, very interesting.

I am using:

blah = x.getElementsByTagName('input')[0].id

It works very nicely. Thanks everyone.

Dan