CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin Vargheese
Martin Vargheese

Reputation: 13

Load image in DIV from url obtained from a TEXT BOX

I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done

<html lang="en">
    <head>
    </head>
    <body>
        <input type="text" class="imageURL1">
        <div class="ImageContainer">
          image will appear here:  
        </div>
    </body>
</html>

Upvotes: 0

Views: 3054

Answers (6)

KiiroSora09
KiiroSora09

Reputation: 2287

Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.

$('.imageURL1').change(function() {
    var $img = $('<img/>');
    $img.attr('src', $(this).val());
    $img.load(function() {
        $('.ImageContainer').html(this);
    });
});

This solution requires jQuery.

Working fiddle here.

Upvotes: 0

GobSmack
GobSmack

Reputation: 2261

Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div. 

function addImage()
{
  var url = document.getElementsByClassName("imageURL1")[0].value;
  var image = new Image();
  image.src = url;
  document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
  <head>
  </head>
  <body>
    <input type="text" class="imageURL1" onChange="addImage();">
    <div class="ImageContainer">
      image will appear here:  
    </div>
  </body>
</html>

Upvotes: 2

nalinc
nalinc

Reputation: 7425

How about using a button to call a funtion that'll change the image src with url in the text box

HTML

<html lang="en">
    <head>
    </head>
    <body>
        <input type="text" class="imageURL1">
        <button onclick="func()">Load image</button>
        <div class="ImageContainer">
          <img src="" id="imgContainer">
        </div>
    </body>
</html>

javascript

(function(){
var func = function(){
 var url = $(".imageURL1").val()
 $('#imgContainer').attr('src',url)
}

})();

Here's the jsFiddle with jQuery and without jQuery

Upvotes: 0

Shehroz Ahmed
Shehroz Ahmed

Reputation: 537

You can try something like this. 

$(document).ready(function(){
    $("#Submit").click(function(){
        var image_url = $(".imageURL1").val();
        $(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
          
</div>

Js fiddle example -> http://jsfiddle.net/0kvxpnmv/

Upvotes: 1

wuno
wuno

Reputation: 9885

Use php

index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>

Now when they click submit it will take you to the new page 

GetURL.php

$image_url = $_REQUEST['url'];

<html lang="en">
    <head>
    </head>
    <body>
        <input type="text" class="imageURL1">
        <div class="ImageContainer">
          <?php echo '<img src="{$image}"/>'; ?>
        </div>
    </body>
</html>

On this page you can see that in your imageContainer class you have the image url being posted with PHP

The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.

So you would type in the url to the textbox and when your done it refreshes the image url.

Upvotes: 0

Sadikhasan
Sadikhasan

Reputation: 18600

$('<img src="'+image_url+'">').load(function() {
  $(this).appendTo('.ImageContainer');
});

JS Fiddle

Upvotes: 0

Related Questions