Results 1 to 5 of 5

Thread: onClick copy image url into input field

  1. #1
    Join Date
    Jul 2008
    Location
    Serbia
    Posts
    47
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default onClick copy image url into input field

    Hello,

    Like I said in thread title, need to copy image url onClick using JavaScript and after copying link will be showed in input field.

    Copy from:
    Code:
    <ul id="image_list">
    <li><img src="dir/dir/image1.jpg" /></li>
    <li><img src="dir/dir/image2.jpg" /></li>
    <li><img src="dir/dir/image3.jpg" /></li>
    </ul>
    Copy to:
    Code:
    <form>
    <label for="copy_img">Image</label>
    <input type="text" name="copy_img" id="copy_img" />
    </form>
    Any help is appreciated. Thanks for your time

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    You can try this, the address is absolute though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function clicked(address) {
    	document.getElementById('copy_img').value = address.src;
    }
    </script>
    </head>
    <body>
    <form>
    	<label for="copy_img">Image</label>
    	<input type="text" name="copy_img" id="copy_img" />
    </form>
    <ul id="image_list">
    	<li><img src="dir/dir/image1.jpg" onclick="clicked(this)" /></li>
    	<li><img src="dir/dir/image2.jpg" onclick="clicked(this)" /></li>
    	<li><img src="dir/dir/image3.jpg" onclick="clicked(this)" /></li>
    </ul>
    </body>
    </html>
    Corrections to my coding/thoughts welcome.

  3. The Following User Says Thank You to bluewalrus For This Useful Post:

    bokanegro (03-23-2011)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    You can get the exact path as specified by the src attribute by using getAttribute():

    Code:
    function clicked(address) {
    	document.getElementById('copy_img').value = address.getAttribute('src', 0);
    }
    Or, if you want just the filename.ext, you can use a regular expression:

    Code:
    function clicked(address) {
    	if((address = clicked.re.exec(address.src))){
    		document.getElementById('copy_img').value = address[0];
    	}
    }
    clicked.re = /[^\/]+$/;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bokanegro (03-23-2011)

  6. #4
    Join Date
    Jul 2008
    Location
    Serbia
    Posts
    47
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Thanks, it's working

  7. #5
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the code works great, but how i do if i want to copy more than one image to multiple fields?

    eg:
    copy one image go to field 1
    copy other image go to field 2
    copy the first image againt go to field 3.

    is it possible?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •