getElementByName within containing DIV

[DanWeaver]

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>

<div id="Div1">
<a id="A2" onclick="HmmFunc(this);">
<img src="action.gif" />
</a>
<input id="input_two" name="inputbox" />
</div>

Id like to do the following:

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

I cant figure out why I cant search within
a div for a child element with a specified name to get a control.
I can to it as follows but I know the name of the input box I want
within the specified DIV...

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

 

[Joost Diepenmaat]

Id like to do the following:

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

I cant figure out why I cant search within
a div for a child element with a specified name to get a control.
I can to it as follows but I know the name of the input box I want
within the specified DIV...

That's because you made up getElementByName, the actual name of the
input box is "inputbox", not "input", and there isn't a function that
does what you want directly.

IOW, don't make stuff up and expect it to work. Computers don't like it.

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

So if that works, what's wrong with it? Except for the fact that

document.getElementById(element.id) == element, unless you've got more
than one element with the same id, which you shouldn't. IOW:

function myFunc(element) {
var inputs = element.parentNode.getElementsByTagName("input");
inputs[0].value = "whatever";
}

 

[George Maicovschi]

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>

<div id="Div1">
<a id="A2" onclick="HmmFunc(this);">
<img src="action.gif" />
</a>
<input id="input_two" name="inputbox" />
</div>

Id like to do the following:

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

}

I cant figure out why I cant search within
a div for a child element with a specified name to get a control.
I can to it as follows but I know the name of the input box I want
within the specified DIV...

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

}

Try assigning a name to the DIV element and use the DOM syntax to
access elements by their name like:

document.body.div_name.inputbox ...

It should work...shouldn't it? I'm curious if it works, if you try it,
tell me

 

[George Maicovschi]

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>

<div id="Div1">
<a id="A2" onclick="HmmFunc(this);">
<img src="action.gif" />
</a>
<input id="input_two" name="inputbox" />
</div>

Id like to do the following:

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

}

I cant figure out why I cant search within
a div for a child element with a specified name to get a control.
I can to it as follows but I know the name of the input box I want
within the specified DIV...

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

}

Oh sorry, or you could use nextSibbling if that's the structure of
your code. This will surely do the trick, but it isn't as flexible as
anything else.

 

[Joost Diepenmaat]

Try assigning a name to the DIV element and use the DOM syntax to
access elements by their name like:

document.body.div_name.inputbox ...

It should work...shouldn't it? I'm curious if it works, if you try it,
tell me

I shouldn't. For a couple of obvious reasons, one being that names
aren't guaranteed to be unique.

 

[DanWeaver]

Thanks Joost and George-
Joost- yes youre right about my error in placing the code here- I
meant:

Id like to do the following (input-->inputbox):

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

But the reason my solution isnt great is that I already know the input
control I want as long as I know the div that it is within (which I
do)- it seems crazy to have to create an array of all tagnames ie all
<input> elements and then extract the one I want. In the scenario
there may be 10 inputs and 10 similar (though uniquely id'd) divs: I
want a handle on an input where name="inputname" so I can populate it-
I am not interested in the other input boxes within the div. The
input of course has a unique id but Id like to use the same function
so that it is passed the div it is within and can find the appropriate
select box to populate...

 

[DanWeaver]

Hi George, apparently name is not a valid attribute of div. I also
tried document.body.moo.inputbox where moo is the divID but inputbox
is the input name (the id changes depending on the div its within) but
as I suspected this was no good- so Ive got only the original
excessive solution!

 

[Thomas 'PointedEars' Lahn]

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>

<div id="Div1">
<a id="A2" onclick="HmmFunc(this);">
<img src="action.gif" />
</a> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<input id="input_two" name="inputbox" />
</div>

Id like to do the following:

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

I cant figure out why I cant search within
a div for a child element with a specified name to get a control.

Because you have reinvented Wheel, version 0.2.3 (unstable). We are at
least at version 0.9.6 now:

<form action="" onsubmit="return handleSubmit(this)">
<script type="text/javascript">
function handleSubmit()
{
var o = document.getElementById(arguments.callee.inputID);
if (o) o.value = "newValue";
return false;
}
</script>

<input type="image" src="action.gif" alt="action"
onclick="handleSubmit.inputID = 'input_one'">

<input id="input_one" name="inputbox">

<input type="image" src="action.gif" alt="action"
onclick="handleSubmit.inputID = 'input_two'">

<input id="input_two" name="inputbox">
</form>


HTH

PointedEars

 

[Joost Diepenmaat]

But the reason my solution isnt great is that I already know the input
control I want as long as I know the div that it is within (which I
do)- it seems crazy to have to create an array of all tagnames ie all
<input> elements and then extract the one I want. In the scenario
there may be 10 inputs and 10 similar (though uniquely id'd) divs:

The problem is, that since names aren't unique, selecting by name may
always return more than one element (or zero) elements. That's why there
isn't a getElementByName method. Besides that, getElementsByName is
AFAIK only a valid method for the document object (IOW, you can't select
descendants nodes of arbitrary nodes by name).

In any case I would not expect any performance issues using
parent.getElementsByTagName('input') with an additional test on name
unless you've got *much* more than 10 input children, or if the sub
document is extremely large.

want a handle on an input where name="inputname" so I can populate it-
I am not interested in the other input boxes within the div. The
input of course has a unique id but Id like to use the same function
so that it is passed the div it is within and can find the appropriate
select box to populate...

I still don't know why you're looking at the parent's ID. You don't need
it and it only complicates the code. Just do something like:

function getInputname(el) {
var list = el.parentNode.getElementsByTagName("input");
for (var i =0; i < list.length ;i++) {
if (list.name == "inputname") {
// found it.
}
}
}

 

[Alexey Kulentsov]

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

var moo = ref.parentNode.id;
var x=document.getElementById(moo)

.eq.

var x=ref.parentNode


You CAN search tag by name and id inside given DOM branch. Use XPath.
Google 'javascript xpath' to see details. But I think it's too complex
solution for this task.

 

[DanWeaver]

Thanks a million all. What a great response from this group. I am
quite enjoying javascript! PointedEars: your solution is a bit above
my fairly newbee level but thanks for taking the time and all others
too. Joost- I will probably use the slice of code you proposed or
something similar- I feel like I have a handle on nodes, parents etc
thanks to you guys.

Cheers,

Dan

 

[a1eah71]

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>

<div id="Div1">
<a id="A2" onclick="HmmFunc(this);">
<img src="action.gif" />
</a>
<input id="input_two" name="inputbox" />
</div>

Id like to do the following:

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

}

I cant figure out why I cant search within
a div for a child element with a specified name to get a control.
I can to it as follows but I know the name of the input box I want
within the specified DIV...

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



}- Hide quoted text -

- Show quoted text -

I suggest changing getElementByName('input') to
getElementsByName('inputbox') then assigning the string to the value
property of the zeroth element of the x array.

function HmmFunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByName('inputbox');
x[0].value = "newvalue";
}

Herbert

 

[Thomas 'PointedEars' Lahn]

Thanks a million all. What a great response from this group. I am
quite enjoying javascript! PointedEars: your solution is a bit above
my fairly newbee level

It is not that difficult if you take the time to read it slowly. First
understand that functions are first-class objects in these languages.
Therefore, I (can) augment the Function object with a property when one of
the submit buttons is activated (e.g. clicked, hence `onclick'). Also I
call this function when the form is submitted (`onsubmit'; after and because
of the submit button activation) which reads the value of its user-defined
property.

This is the approach that is most compatible and one that can degrade
gracefully as the `action' attribute of the `form' element may refer to a
server-side script that is used if client-side handling is not possible (so
that the `on...' event handler attributes go ignored).

The positioning of the `script' element is merely a matter of style, as
variable instantiation (of the function identifier as property of the Global
Object) takes place before execution.

but thanks for taking the time

You're welcome.


PointedEars

 

[DanWeaver]

That is exactly what I wanted but doesnt work on my machine- gets
stuck on x= (have sent a pic of this in firebug to your email
Herbert).

 

[Thomas 'PointedEars' Lahn]

I suggest changing getElementByName('input') to
getElementsByName('inputbox') then assigning the string to the value
property of the zeroth element of the x array.

function HmmFunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByName('inputbox');
x[0].value = "newvalue";

}

That is exactly what I wanted but doesnt work on my machine- gets
stuck on x= (have sent a pic of this in firebug to your email
Herbert).

Probably you have written `getElementByName' instead of `getElementsByName'.

The above code is quite inefficient. `ref.parentNode' is a reference to the
parent element object already. It does not make sense to retrieve the
element's ID through this reference and then retrieve the reference again
with document.getElementById():

function hmmFunc(ref)
{
var moo = ref.parentNode;
var x = moo.getElementsByName('inputbox');
x[0].value = "newvalue";
}

This is of course still error-prone; you should add the usual feature tests
and associated fallbacks.


PointedEars

 

[DanWeaver]

Blimey, Sorry to keep banging on about this: its incredible how much
one issue can take re time and energy. Firebug (what a great thing!)
tells me that getElementsByName is undefined. Perhaps in this context
it is inappropriate. I quite understand if you're all bored of this by
now.
Pointed Ears, that solution looks good to me but for the above.
I now have the following which doesn't work...

<form id="form1">

<div id="div_a">
<img alt="doit" src="action.gif" onclick="hmmfunc(this)" />
<input id="input_one" name="blahinputbox" />
</div>

<div id="div_b">
<img alt="doit" src="action.gif" onclick="hmmfunc(this)"/>
<input id="input_two" name="blahinputbox" />
</div>

<div id="div_c" >
<img alt="doit" src="action.gif" onclick="hmmfunc(this)"/>
<input id="input_three" name="blahinputbox" />
</div>

</form>

....and javascript...

function hmmfunc(ref)
{
var moo = ref.parentNode;
var x = moo.getElementsByName('blahinputbox');
x[0].value = "newvalue";
}

 

[Thomas 'PointedEars' Lahn]

[...] Firebug (what a great thing!) tells me that getElementsByName is
undefined. Perhaps in this context it is inappropriate.

A DOM object does not need to implement the Node interface of W3C DOM Level
2+. However, as this object implements this interface in the Gecko DOM, I
would consider that a bug in this DOM.

Nevertheless, I have posted a better, working (and Valid) solution before
already; all you have to do is to try that out, or to explain why you think
it does not qualify as a solution to your problem.

[...] Pointed Ears, that solution looks good to me

Better than the original, but not good, as it does not degrade gracefully.
It is just a more efficient variant. See above.

but for the above. I now have the following which doesn't work...

<form id="form1">

The `form' element's `action' attribute is required.

<div id="div_a"> <img alt="doit" src="action.gif" onclick="hmmfunc(this)"
/> <input id="input_one" name="blahinputbox" /> </div>

^ ^
Do not use XML syntax when you mean HTML.


PointedEars

 

[DanWeaver]

Wow PE you certainly know your stuff. Unfortunately you are operating
a few miles above my javascript level (which is, however, swiftly
improving).

I tried your solution...

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

It works a treat but I have a few problems with it-

The page is a javscript based tool with many other buttons and
functions. 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? I need to get a handle on the
appropriate inputbox without 'tying up' the forms. Thanks for your
continued support, Thomas.
D

 

[a1eah71]

That is exactly what I wanted but doesnt work on my machine- gets
stuck on x= (have sent a pic of this in firebug to your email
Herbert).

I suggest changing getElementByName('input') to
getElementsByName('inputbox') then assigning the string to the value
property of the zeroth element of the x array.

function HmmFunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByName('inputbox');
x[0].value = "newvalue";

}

Herbert- Hide quoted text -

- Show quoted text -

I understand your goal is to eliminate absolute references of the type
that appears in the following code.
. . .
<script>
function hmmfunc(mybox)
{
var moo = document.getElementsByName(mybox)
moo[0].value=moo[0].id;
}
</script>
. . .

<form id="form1">
<div id="div_a">
<img alt="doit" src="Arw05lt.jpg" onclick="hmmfunc('box1')">
<input id="input_one" name="box1">
</div>
<div id="div_b">
<img alt="doit" src="Arw05lt.jpg" onclick="hmmfunc('box2')">
<input id="input_two" name="box2">
</div>
<div id="div_c" >
<img alt="doit" src="Arw05lt.jpg" onclick="hmmfunc('box3')">
<input id="input_three" name="box3">
</div>
</form>
. . .

Is my understanding correct?

Herbert

 

[a1eah71]

That is exactly what I wanted but doesnt work on my machine- gets
stuck on x= (have sent a pic of this in firebug to your email
Herbert).

I suggest changing getElementByName('input') to
getElementsByName('inputbox') then assigning the string to the value
property of the zeroth element of the x array.

function HmmFunc(ref)
{
var moo = ref.parentNode.id;
var x=document.getElementById(moo).getElementsByName('inputbox');
x[0].value = "newvalue";

}

Herbert- Hide quoted text -

- Show quoted text -

Dan, I think the following code is what you are looking for. But do
not ask me why it works on my browsers. Perhaps Thomas would explain
it to me.

<script>
function hmmfunc(ref)
{
var moo = ref.parentNode;
var x=moo.childNodes;
var mytarget=x.length-2;
x[mytarget].value=x[mytarget].id;
}
</script>

</head>
<body>
<form id="form1">
<div id="div_a">
<img alt="doit" src="Arw05lt.jpg" onclick="hmmfunc(this)">
<input id="input_one" name="box1">
</div>
<div id="div_b">
<img alt="doit" src="Arw05lt.jpg" onclick="hmmfunc(this)">
<input id="input_two" name="box2">
</div>
<div id="div_c" >
<img alt="doit" src="Arw05lt.jpg" onclick="hmmfunc(this)">
<input id="input_three" name="box3">
</div>
</form>

Herbert