need to find the parent id when using getElementsByName

[nuclearvapid]

i have a dynamically loading eccom form that auto writes the input field's id. i have a tooltip validation that needs the id of the input to "target" the div it writes so that it appears next to the correct input field.

i ahve tried this:
var target = document.getElementsByName('name').getAttribute('id');
but it is unsupported? or have i got it backwards?

thanks

[rangana]

See if this basic example help :)

window.onload=function()
{
var target=document.getElementsByTagName('input');
for (var i=0;i<target.length;i++)
{
target[i].onclick=function()
{
alert(this.id); // Whatever you have here
}
}
}

[Horus_Kol]

Starting point:

<script type="text/javascript">
function whatever(element)
{
var element_parent = element.parentNode;

element_parent.innerHTML = element.value;
}
</script>

<div>
<input type="text" onchange="whatever(this)" />
</div>


you probably want to take a look at a DOM manual (http://www.w3schools.com/htmldom/dom_reference.asp)

[rangana]

You missed:

<input type="text" onchange="whatever(this)" />

[Horus_Kol]

yah - was in a rush

[nuclearvapid]

this is where i have got to so far...

if (document.getElementsByName("forename")){

var idname = getElementById("*");
for (var i = 0; i < id.length; i++) {
if (id[i].getAttribute("name") == "forename") {
// this is where i am stuck - i need it to resolve the id into something i can pass to...
inlineMsg('idname','You must enter your name.');

}

[Horus_Kol]

1. you need to specify a scope for getElementById():

document.getElementById()


2. you can only have ONE element with a particular id attribute - so getElementById will only return the first (and only) element with that ID

3. can you post your full HTML document for us to look at, because you are not being very clear in your posts as to what you are trying to do, and it is much easier to help from the full HTML document

[nuclearvapid]

it just got worse...

function validate(form) {
if (document.getElementById("formid:test")){
var test = form.formid\:test.value;
var testRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
if(!test.match(nameRegex)) {
inlineMsg('test','You have entered an invalid name.',2);
return false;
}
} else {}
return true;
}
second half:
// START OF MESSAGE SCRIPT //

var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;

// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;


var targetdiv = document.getElementById(target); //where it needs to pass the id


targetdiv.select();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeout("hideMsg()", (autohide * 1000));
}

// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById('msg');
if(!msg.timer) {
msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
}
}

// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById('msg');
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = 'alpha(opacity=' + value + ')';

}

// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}

// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}

// preload the arrow //
if(document.images) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}

<form id="formid" onsubmit="return validate(this)">
<label for="">Name *</label>
<input size="40" id="formid:test" type="text" value="" />
</form>

this = id="formid:test" is what a CMS does jsf code. it inherits the parent form id and adds the colon.

[nuclearvapid]

resolved:

function validate(form) {
if (document.getElementById("formid:test")){
var name = form["formid:test"].value;
var forenameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
if(!test.match(testRegex)) {
inlineMsg(["formid:test"],'You have entered an invalid name.',2);
return false;
}
} else {}
}

[Horus_Kol]

i am very confused as to what you are trying here... i'm sure you're overcomplicating things...

[nuclearvapid]

i wish it were just me overcomplicating things....

i have a jsf form which prints out this html

<form id="contactForm" onsubmit="return validate(this)">
<label for="">Name *</label>
<input size="40" id="contactForm:name" type="text" value="" /><br />
<input id="contactForm:submit" type="Submit" value="submit"</p>
</form>


The id="contactForm:name" is a jsf thing that prepends the form id (contactForm) onto all child elements (eg name, submit). In order to use one validation script for multiple forms i need to strip out the form id, strp out the child id and then reconstruct them to get the element's value. This is where i am going wrong...var name = formid.+[':']+.trimmed.value;


function validate(form) {
var formid = form.id; //should return 'contactForm'
var trimmed = substr(0, form.indexof(':')); //should return 'name'
if (trimmed == "name"){
var name = formid.+[':']+.trimmed.value; //here's where i know i am going wrong
var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
if(name == "") {
alert ('You must enter your name.');
return false;
}
if(!name.match(nameRegex)) {
alert ('You have entered an invalid name.');
return false;
}
} else {}

return true;
}