PDA

Click to See Complete Forum and Search --> : Unable to get id of image button

shaoen01
12-17-2005, 03:15 AM
I wish to get the id of the <input type="image"> in the client-side before it generate the postback in the server-side. However, i always received a "null" or "[Object]", which is displayed using the "window.alert()" method.

This is my coding used to create the image button:

<input type="Image" name="1.jpg" id="1.jpg" onclick="Btn1_onClick(this)" src=Images/1.jpg class="removeBorder" onmouseover="this.className='applyBorder'"
onmouseout="this.className='removeBorder'" />"


Below is the Btn1_onClick() which is called onclick:

<script>
function Btn_onClick(control){
window.alert(window.document.getElementById(control.id));
//window.alert(window.event.srcElement);
}
</script>


I have also tried using the "window.document.getElementsByTagName(tag)", "window.document.getElementsByName(name)" and "window.event.srcElement", but still return the "[object]" message.

Btw, i am creating a user control (.ascx) in ASP.net, therefore i wont be able to use <form> tags, if this information is of any help. Thanks
Fang
12-17-2005, 04:14 AM
name/id must start with a letter: http://www.w3.org/TR/html401/types.html#type-id
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function Btn1_onClick(control){
window.alert(control.id);
}
</script>

</head>
<body>
<input type="Image" name="x1.jpg" id="x1.jpg" onclick="Btn1_onClick(this)" src="Images/1.jpg" class="removeBorder" onmouseover="this.className='applyBorder'" onmouseout="this.className='removeBorder'">
</body>
</html>

You could also do: onclick="Btn1_onClick(this.src)" The image name could then be seperated from the path server-side
bathurst_guy
12-17-2005, 04:18 AM
are you trying to get the id "1.jpg" to be alerted?
if so change script to this
<script>
function Btn_onClick(control){
alert(control.id);
}
</script>
shaoen01
12-17-2005, 10:24 AM
I have decided to get the web controls using "getElementsByTagName" instead and it works great.


<script language="javascript">
function Btn_onClick(){
var elements = window.document.getElementsByTagName("span");
var lbl;
var lblId=new String("");
var index=new Number(0);

for(index=0;index<=elements.length-1;index++){
if(elements[index].id.split("_")[2]=="lblURL"){
elements[index].innerHTML=window.event.srcElement.id;
window.alert(elements[index].innerHTML);
}//end if
}//end for
}//end function
</script>


Right now, my current problem is that after a postback, the text inside lblURL will disappear. That i cant figure out at the moment, have you guys faced this problem before?
Fang
12-17-2005, 11:15 AM
The code only works for IE
shaoen01
12-18-2005, 08:50 AM
Are you sure? Then what should i use so that both IE and other browsers will accept?
Fang
12-18-2005, 10:41 AM
Pass the object to the function, then the id is:elements[index].innerHTML=control.id;
shaoen01
12-19-2005, 10:46 AM
I did what you said and it works fine as well. I didnt know that "window.event.srcElement()" only works for IE. Thanks for letting me know!