Forum Moderators: open
I am trying to add an error message after validating an input field. For this I am using getElementbyId. This works fine in Mozilla, but does not work in IE6. getElementById returns an object in IE6. Below is the same code. I appreciate your help. Thanks
<html>
<head>
<style type='text/css'>
.asterisk {
visibility:hidden;
font-weigh:bold;
color: #ff0000;
}
</style>
</head>
<script type="text/javascript">
function validate()
{
// This statement checks for a name value.
if(document.test.person_name.value=="")
{
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk') );
document.getElementById('nameAsterisk').style.visibility = 'visible';
return false;
}
else{
return true;
}
}
</script>
<body>
<form name="test" onSubmit="return validate()" method="POST" >
<table>
<tr>
<td>Name :</td>
<td>
<input name="person_name" type="text" value="" size="65" style="color: #006076, font-size: 8px, font-weight: normal, font-family: Arial, Helvetica, sans-serif;" />
<SPAN class="asterisk" id="nameAsterisk">* Add Name</SPAN>
</td>
</tr>
<tr>
<td> <input type="submit" value="Submit" name="submit" /> <td>
</tr>
</table>
</form>
</body>
</html>
and a warm welcome to these forums. ;)
I am not entirely certain what it is that you expect the alert to display.
You could try these various alerts for more precise info...
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk').tagName );
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk').id );
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk').className );
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk').firstChild.nodeValue );
Thanks for your reply. After I modified by JS function by assigning the getElementById value to a variable, I was able to display the error message in IE6. I am not sure why it works this way. Is there any other ways to do this?
function validate()
{
// This statement checks for a name value.
if(document.test.person_name.value=="")
{
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk') );
//document.getElementById('nameAsterisk').style.visibility = 'visible';
var skin=document.getElementById('nameAsterisk').style;
skin.visibility= 'visible';
return false;
}
else{
return true;
}
}
I am trying to add an error message after validating an input field. For this I am using getElementbyId. This works fine in Mozilla, but does not work in IE6. getElementById returns an object in IE6.
I am also curious as to how "this works fine in Mozilla"? The getElementById() method returns an object in both Mozilla and IE (does it not)?! Normally you would want to read/assign properties of this object, not the object itself.
Surely, these two code snippets are the same(?):
document.getElementById('nameAsterisk').style.visibility = 'visible';var skin=document.getElementById('nameAsterisk').style;
skin.visibility= 'visible';The second method is merely 'shorthand' if you needed to change many style properties.
alert('document.getElementById("nameAsterisk")-->'+ document.getElementById('nameAsterisk') );
In IE, it came as object, where in Mozilla it gave the name of the HTML SPAN element.
It was not adding the error message in IE unless I store the object I got from getElementById in a variable.
getElementById returns the entire DOM object. Moz is a little more informative as to it's nature.
You cannot change the object, unless you want to replace the entire element.
You can only change the objects properties.
Penders is also correct, his 2 examples are the same, by using "var skin" you're making a reference to the style object within the nameAsterisk object.
Please tell us what you're trying to achieve.
