Insert img src into input onClick

Question

I'm trying to expand on the javascript the you guys helped me with.

The Snippet:

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

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

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

The spans are working correctly, although I don't actually need them. I will have all images once I figure this out.

I have tried a few ways, but what I can find is not directly related to my use.

The end goal is to get the img src into the text input with js, preferably somewhat how it already exists. I feel it's really close.

Check the console for errors..Try document.getElementsByName('NAME')[0].value=o; — Rayon
– Rayon, Commented Mar 10, 2016 at 4:42
want to post that in an answer =) that did the trick, now the spans return object blah blah, but i only needed the img working anyway =) — DrCustUmz
– DrCustUmz, Commented Mar 10, 2016 at 4:53
The cause of getting [object] is passing this instead of this.textContent or this.innerHTML — Rayon
– Rayon, Commented Mar 10, 2016 at 5:12

Rayon · Accepted Answer · 2016-03-11 03:50:06Z

1

this.src will be src property of the image object. o.innerHTML will try to read innerHTML property of the this.src which does not exist.

Just use passed argument as value of the input element.

document.getElementsByName('NAME')[0].value=o;

Fiddle here

Edit: To get the value of the src attribute instead of src property, use this.getAttribute('src'). this.src will return the URL of the element.

edited Mar 11, 2016 at 3:50

answered Mar 10, 2016 at 4:56

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DrCustUmz Over a year ago

using this method is there a way so it only grabs whats in the src? and not the actual src? like if i have src="../images/pic.png" thats what it puts in the box. right now it puts the url to the src src="http:/site.me/images/pic.png

gurvinder372 · Accepted Answer · 2016-03-10 04:54:34Z

0

When you did this.src it returns a string rather than a DOM element.

Just simply pass the value that you want to show

<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">

answered Mar 10, 2016 at 4:54

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Peter · Accepted Answer · 2016-03-10 05:30:44Z

0

I tried run your code, see below.

Also I used document.querySelector('#testinput') instead of document.getElementsByName('NAME')[0]

<html>
<head>
    <script>
    function changeValue(val) {
        document.querySelector('#testinput').value = val;
    }
    </script>
</head>

<body>
    <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" id="testinput" name="NAME" value="SOMETHING">
</body>
</html>

answered Mar 10, 2016 at 5:30

Peter

8151 gold badge7 silver badges12 bronze badges

1 Comment

DrCustUmz Over a year ago

this cant work for my current project due to the product not having access to the input fields code to add an ID so I have to go by name. but this will come in handy for future projects

Collectives™ on Stack Overflow

Insert img src into input onClick

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related