how to retrieve image name with onclick

beetle_jaipur · March 25th, 2009, 07:45 AM

Hi,

i am new to javascript, and have a small problem.

i have a asp page, on which many images are shown,

i want to collect the name of image in a text box with onclick function, but could not know the right approach,

Code:

<form id="form1" name="form1" method="post" >
  <img src="Favourite.gif" name="Favourite" onclick="elements['ImageName'].value = this.name"/>
  <img src="VoteNo.gif"  name="VoteYes"/>
  <img src="VoteYes.gif" name="VoteNo"/>
  <input name="ImageName" type="text" />
</form>

plz help me out

all suggestions are welcome

thanks for considering

best regards
ashok sharma

joefawcett · March 25th, 2009, 07:58 AM

Code:

<img src="myImage.gif" onclick="showSource(this);" >

and then in a script block:

Code:

showSource(image)
{
  alert(image.src);
}

You may need to parse the src property to get exactly what you need as it will be an absolute URL.

philip_cole · March 25th, 2009, 08:18 AM

Hi Ashok,
It look more like you want to set the value of the textbox to a friendly value representing the image they clicked. You could do it using the name field as so:

Code:

<form id="form1" name="form1" method="post" >
  <img src="Favourite.gif" name="Favourite" onclick="SetImageName(this.name)"/>|
  <img src="Rubbish.gif" name="Rubbish" onclick="SetImageName(this.name)"/>|
  <input type="text" value="" id="ImageName" name="ImageName">
</form>

<script language="javascript" type="text/javascript">
function SetImageName(strName)
{
  document.getElementById("ImageName").value = strName;
}
</script>

Putting it in a separate function helps keep it manageable. To get the reference to the textbox, use document.getElementById - you will need to add an id property to the textbox, as well as the name.

However, to make it a bit easier, and not have to tie the name of the image to the text you display, you may be better off doing something like this, and just passing the text to display directly into the function:

Code:

<form id="form1" name="form1" method="post" >
  <img src="Favourite.gif" onclick="SetImageName('Favourite')"/>|
  <img src="Rubbish.gif" onclick="SetImageName('Rubbish')"/>|
  <input type="text" value="" id="ImageName" name="ImageName">
</form>

<script language="javascript" type="text/javascript">
function SetImageName(strName)
{
  document.getElementById("ImageName").value = strName;
}
</script>

HTH
Phil

beetle_jaipur · March 25th, 2009, 08:40 AM

Hi Phil,

thanks for your valuable reply,
that was i was searching,

i want to know one more thing, if you plz can help

i am writing this function to provide change image facility to user.
and trying to give user a thumbnails of images, so that he can select.

and after submit, this filename will be store in database for future reference.

and i was trying this route

user -> click on image ->value in textbox (or hidden variable) -> submit ->save to database..

is there any approach possible, so that not to use that textbox to collect value for temporary hold...

am working with asp

again, thanks for your reply, it was quite useful.

best reagards
ashok sharma

philip_cole · March 25th, 2009, 09:39 AM

Storing the value in some sort of form field as you are doing is probably the easiest way - it has to be sent to the server somehow.
Just changing the textbox to an <input type="hidden" /> will probably do the job for you. it works in the same way as a textbox but isn't shown on screen.

Phil

abdelelbouhy · April 6th, 2009, 10:16 AM

<head>

<script type="text/javascript">

</script>
</head>
<body>
<form name="myForm">
<select name="imageName" onChange="showImage(this); this.selectedIndex=0;">
<option>selectImage</option>
<option value="images/005.jpg"> sara
<option value="images/009.jpg"> ahmed
</select>
</form>
</body></html>