Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old March 25th, 2009, 07:45 AM
Authorized User
 
Join Date: Feb 2006
Location: jaipur, rajasthan, India.
Posts: 67
Thanks: 7
Thanked 0 Times in 0 Posts
Send a message via Yahoo to beetle_jaipur
Default how to retrieve image name with onclick

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
  #2 (permalink)  
Old March 25th, 2009, 07:58 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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.
__________________
Joe
http://joe.fawcett.name/

Last edited by joefawcett; March 25th, 2009 at 07:59 AM.. Reason: Code incorrect
  #3 (permalink)  
Old March 25th, 2009, 08:18 AM
Friend of Wrox
Points: 894, Level: 11
Points: 894, Level: 11 Points: 894, Level: 11 Points: 894, Level: 11
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2005
Location: London, , United Kingdom.
Posts: 166
Thanks: 2
Thanked 33 Times in 33 Posts
Default

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
  #4 (permalink)  
Old March 25th, 2009, 08:40 AM
Authorized User
 
Join Date: Feb 2006
Location: jaipur, rajasthan, India.
Posts: 67
Thanks: 7
Thanked 0 Times in 0 Posts
Send a message via Yahoo to beetle_jaipur
Default how to relate it with asp

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
  #5 (permalink)  
Old March 25th, 2009, 09:39 AM
Friend of Wrox
Points: 894, Level: 11
Points: 894, Level: 11 Points: 894, Level: 11 Points: 894, Level: 11
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2005
Location: London, , United Kingdom.
Posts: 166
Thanks: 2
Thanked 33 Times in 33 Posts
Default

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
The Following User Says Thank You to philip_cole For This Useful Post:
beetle_jaipur (March 25th, 2009)
  #6 (permalink)  
Old April 6th, 2009, 10:16 AM
Registered User
 
Join Date: Apr 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default try this one

<head>


<script type="text/javascript">
<!--
function showImage(selectedImage) {
var selectionName = selectedImage.options[selectedImage.selectedIndex].text;
var selection = selectedImage.options[selectedImage.selectedIndex].value;

}
//-->
</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>


Similar Threads
Thread Thread Starter Forum Replies Last Post
Retrieve and Display Image asters .NET Framework 1.x 0 September 18th, 2008 03:56 AM
Image button onclick msbsam ASP.NET 2.0 Basics 0 December 30th, 2006 04:47 AM
swap image onclick The Beginner Javascript How-To 2 November 8th, 2006 08:42 AM
How to insert and retrieve image? hlchuah77 SQL Server 2000 3 February 13th, 2005 11:41 AM
ADO.NET(Retrieve image from databse) lovelyphor ADO.NET 1 October 9th, 2004 10:17 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.