Get img src from input box into a div

Question

The idea behind this small project of mine is to have an user enter an URL for an img, when the user hits a button the img should then be inserted into a new <div> within the page.

I tried looking for hours at stackoverflow but I honestly don't understand how I can use other answers to my own code. Most of the CSS and HTML code is already done, I just need help with the javascript part if its possible at all.

Here is what I have so far:

HTML code:

<form name="imgForm">
  enter URL:
  <input type="text" name="inputbox1" value="src" />
  <input type="button" value="Get Feed" onclick="GetFeed()" />
</form>

Javascript code:

<script type="text/javascript">
  function GetFeed(imgForm) {
    var imgSrc = document.getElementById("src").value;
  }
</script>

Can anyone help me out? I dont know where to go from here.. at least give me some pointers how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> for every time an unser inserts and new URL for an img?

The Alpha · Accepted Answer · 2012-03-27T00:20:25.203

1

I think according to your need how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> you need this

HTML

<form>
  <input type="text" id="txt">
  <input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>

JS (goes inside your head tags)

function getImg(){
    var url=document.getElementById('txt').value;
    var div=document.createElement('div');
    var img=document.createElement('img');
    img.src=url;
    div.appendChild(img);
    document.getElementById('images').appendChild(div);
    return false;
}

Here is an example.

edited Mar 27 '12 at 00:20

answered Mar 27 '12 at 00:13

The Alpha

143,660
29
287
307

This works great, Thanks a lot, i think the hardest part for me was creatElement and appendChild, i see what you did there I can finally move to the next phase of my small project. – user1294097 Mar 27 '12 at 01:10

score 0 · Answer 2 · answered Mar 28 '20 at 01:13

your codes better should be like this: html Codes:

<div class="input-group col-md-5" style="margin: 0px auto;">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-image">
              Choose
      </button>
    </div>
   <input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
   <img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>

js Codes:

function getImg(){
        var url = document.getElementById('image_label').value;
        var img = document.getElementById('imgThumb');
        img.src = url;
        return true;
    }

score 0 · Answer 3 · answered Mar 27 '12 at 00:01

You should add an id attribute to your <input>:

<input type="text" name="inputbox1" id="box1" value="src" />

...then, adjust your code:

var imgSrc = document.getElementById('box1').value;

Once you have the source, you can get back an object for the img tag, and set its properties using the value from the text box. The img object's properties are defined by the Document Object Model:

http://www.w3schools.com/jsref/dom_obj_image.asp

score 0 · Answer 4 · answered Mar 27 '12 at 00:14

Something like this will create a div with an image element that has a src equal to the text in the input box. It then appends the div to end of the page.

<html>
    <head>
        <script type="text/javascript">
            function GetFeed(form){
            var imgSrc = form.elements["inputbox1"].value;  
            var imgDiv = document.createElement('div');
            imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
            document.body.appendChild(imgDiv);
            }
        </script>
    </head>
    <body>
        <form name="imgForm">
            enter URL:
            <input type="text" name="inputbox1" value="src" />  
            <input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
        </form>
    </body>
</html>

Get img src from input box into a div

4 Answers4

Linked