JavaScript Forum

**shaoen01** · 12-17-2005, 05:13 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:

Code:

<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:

Code:

<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

**funkdaddu** · 10:49 PM

all you need in your function is:

alert(control.id)

as you've already passed the input as an object - that's what "this" is, it's saying pass "this" (the input button) as an object. You don't need to get the object again using getElementById, you just need to retrieve the id attribute from the object. Does that help?

**shaoen01** · 12-18-2005, 10:44 AM

I have tried using "control.id" but it does not work for me. Thats why i resorted to using "getElementById". Anyway, i managed to solve it, i used the getElementsByTagName instead. And of course, i have edited my function quite a bit.

Here is the coding for my new function:

Code:

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

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

</script>

Thanks for your help!

**funkdaddu** · 12-18-2005, 12:47 PM

For one, I'd be careful using "elements" as a variable as it is already a built-in one. But your code is giving a huge run around for a simple solution, I think you just had some buggy code. Does this not do what you want it to, in one line of code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function Btn_onClick(obj) {
	alert(obj.id);
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<input type="Image" name="myInputButton" id="myInputButton" onclick="Btn_onClick(this)" src="Images/1.jpg" class="removeBorder" onmouseover="this.className='applyBorder'" onmouseout="this.className='removeBorder'" height="50" width="50" />
	</body>

</html>

**shaoen01** · 12-19-2005, 12:54 PM

Actually, what i was trying to do in my previous code is to get the value of the button clicked and store it inside a textbox called txtURL, thats why i need to for-loop to find out which control has the id called "txtURL".

This code below is my latest modifications, i have also changed the variable called "elements" to "inputElements".

Code:

i<script language="javascript">
function Btn_onClick(control){
var elements = window.document.getElementsByTagName("input");
var index=new Number(0);

for(index=0;index<=elements.length-1;index++){
	if(elements[index].id.split("_")[2]=="txtURL"){
	elements[index].value=control.id;
		}//end if
	}//end for
}//end function

</script>

**funkdaddu** · 04:40 PM

But when you click the image-input button it is going to submit the form, is that going to be a problem? If you just want to get the value of the current clicked object, and put it in a text field, this script is much simpler. You don't need to loop through all the input tagged objects to find one id when you can just reference it with document.getElementById:

Code:

function Btn_onClick(obj) {
        document.getElementById("txtURL").value = obj.value;
}

and then just call "Btn_onClick(this)" from the onclick handler of whichever object you want. Here is a sample in action:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function Btn_onClick(obj) {
        document.getElementById("txtURL").value = obj.value;
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="" method="get" name="FormName">
			<button name="myButton" type="button" value="This is my Button's Value" onclick="Btn_onClick(this);">Button</button>
			<p><input type="text" name="txtURL" id="txtURL" size="24"></p>
		</form>
		<p></p>
	</body>

</html>

**shaoen01** · 12-21-2005, 12:20 PM

Your coding below does not work for me. I think mainly because i do not have a <form> tag in my .ascx file, which can not be used. Therefore, the coding below did not work. I also noticed that when i view source of that HTML page, the txtURL is named as "Image_UC_txtURL". Which is why i think the "getElementById" does not work. I have no chocie but to search using a "input" tag.

If another user of my this component renames "Image_UC" to something else, i may have to change coding if i hard code the id. E.g. "getElementById(Image_UC_txtURL)".

Code:

function Btn_onClick(obj) {
        document.getElementById("txtURL").value = obj.value;
}

**Minaki** · 12-21-2005, 01:03 PM

...which is why you stay away from writing JavaScript with ASP.NET if you can. There's specific ways of doing it, in which you can get the cliend side rendered names of the elements etc. but in most cases there's far easier ways round things.
What exactly are you trying to acheive? Is this still the image drop down list control you're trying to make? You'll save yourself a huge amount of agro if you try it the way I showed you in the other thread.

**funkdaddu** · 01:27 PM

When dealing with service side scripts and JS (esp. ASP.net created forms), you need to take into account the client side output, not the server side. So get your form the way you want it without the JS, then use the rendered, client-side output and write the JS for that. Use the client-side output to create your JS code and stick it into an external JS file.

What are you trying to accomplish with this? There may be a better way...

Oh and not having a FORM tag doesn't matter when you are calling by ID - the script will work, you just need to know all the right (client-side) names of your fields. If you give me the client-side source, it should be easy to modify my code to work.. the only named element is the output box (txtURL), for the rest, it's all objects so it doesn't matter what they are called.