Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
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>
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 05:18 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.