CODEWITHSUNDEEP
javascripthtmlonclick
DrCustUmz
DrCustUmz

Reputation: 388

pass img direct path src to input onClick

i have this snippet:

<script>
  function changeValue(o){
    document.getElementsByName('NAME')[0].value=o;
  }
</script>

<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />

<input type="text" name="NAME" value="SOMETHING">

im trying to make it so when the img is clicked it passes the src that is in between the " " and not the actual url

right now clicking the image results in

http:/site.com/image.gif

being placed in the input

but i need it to be just

image.gif

in the input

how can i accomplish this?

Upvotes: 2

Views: 1008

Answers (6)

Sergey Kolchinskiy
Sergey Kolchinskiy

Reputation: 83

To avoid additional JS and splitting strings/etc, you can define another attribute for the image and call that attribute. I'd avoid using "alt" so that it can serve its purpose of displaying something when the image doesn't load.

For example:

If this.data-path doesn't work, you can use getAttribute('data-path').

Upvotes: 1

Himmel
Himmel

Reputation: 3709

Method 1: str.split()

One way to do this is to split the string into an array by using / as the delimiter. This splits the string up into an array where the / is the functional equivalent of the comma in an array. Here's an example.

var imagePath = 'http:/site.com/image.gif'
var splitted = imagePath.split('/');
// returns ["http:", "site.com", "image.gif"]

// get last str in splitted
var imageFile = splitted[splitted.length - 1];
// returns "image.gif"

Method 2: Regex

You can use regular expressions to get all of the characters following the final \. The expression would look like this:

var regex = /([a-z\.\-\_]+\.[a-z]{2,4})/gi;

This regular expression matches any character (a-z, ., -, _) that are followed by a . and then 2 - 4 characters (a-z).

To match this with your path, you can use String.prototype.match()

var imagePath = 'http:/site.com/image.gif'
var matches = imagePath.match(regex);
// returns ["site.com", "image.gif"]

var imageFile = matches[matches.length - 1]; // "image.gif"

This is more verbose that the former solution, but affords the option of tailoring the image path to fit your needs.

Get file name and extension seperately

var regex = /([a-z\-\_]+)/gi;
var matches = imagePath.match(regex);
// returns ["http", "site", "com", "image", "gif"]

var fileName = matches[matches.length - 2]; // "image"
var extension = matches[matches.length - 1]; // "gif"

Get file name with preceding /

var regex = /(\/[a-z\.\-\_]+\.[a-z]{2,4})/gi;
var matches = imagePath.match(regex);

var lastMatch = matches[matches.length - 1]; // "/image.gif"

Get full path following .com

var imagePath = http:/site.com/some-folder/image.gif;
var regex = /com(\/[a-z\.\-\_\/]+)/i;
var matches = imagePath.match(regex);

var lastMatch = matches[matches.length - 1]; // "/some-folder/image.gif"

Upvotes: 0

DrCustUmz
DrCustUmz

Reputation: 388

i have solved this by using an alt tag

<script>
  function changeValue(o){
    document.getElementsByName('NAME')[0].value=o;
  }
</script>

<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">Two</span>
<img src='image.gif' alt='image.gif' onclick="changeValue(this.alt)" />

<input type="text" name="NAME" value="SOMETHING">

Upvotes: 0

oguzhancerit
oguzhancerit

Reputation: 1572

You can use split function of javascript for splitting; site.com/image.gif

"site.com/image.gif".split(".com/")[1];

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

You can get the substring and then update the value.

function changeValue(o) {
  // its a url, extract it
  if(o.indexOf('http') > -1) {
     o = o.substr(o.lastIndexOf('/') + 1);
  }
  document.getElementsByName('NAME')[0].value = o;
}

Upvotes: 0

Ram
Ram

Reputation: 144689

src property of HTMLImageElement object returns the full/computed source of the image. For getting the desired result you can use the getAttribute method which returns the specified value of an attribute.

this.getAttribute('src')

Upvotes: 1

Related Questions