Introduction:
Here I will explain how to use jQuery to show image based on url entered in textbox with example or jQuery display image based on url with example or jQuery get images inside of div with example or jQuery show image when image URL entered in textbox with example or jQuery display image with url entered in textbox example. In jQuery by adding attr properties to image elements we can easily show image based on the URL entered in textbox based on our requirements.
Description
:
In previous articles I explained jQuery get all image urls within the div example, jQuery show content on image hover with example, jQuery autocomplete highlight matching text in search results, jQuery show / hide div element on scroll with example, jQuery change textbox background color on focus / blur example and many articles relating to css, AngularJS , jQuery, JavaScript and asp.net . Now I will explain how to use jQuery to display image based on entered textbox url with examples.
In previous articles I explained jQuery get all image urls within the div example, jQuery show content on image hover with example, jQuery autocomplete highlight matching text in search results, jQuery show / hide div element on scroll with example, jQuery change textbox background color on focus / blur example and many articles relating to css, AngularJS , jQuery, JavaScript and asp.net . Now I will explain how to use jQuery to display image based on entered textbox url with examples.
In jQuery
to display image based on the image url entered in textbox we need to write the
code like as shown below
|
<script type="text/javascript">
$(function () {
$('#btnShow').click(function () {
$("#imgTest").attr("src", $("#txtUrl").val());
})
})
</script>
|
If
you want complete example to show the image based on the image url entered in
textbox we need to write the code like as shown below
|
<html>
<head>
<title>
jquery show image
from url entered in textbox
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnShow').click(function () {
$("#imgTest").attr("src", $("#txtUrl").val());
})
})
</script>
</head>
<body>
<div>
Enter Image URL:<input type="text" id="txtUrl" /> <input type="button" id="btnShow" value
="Show
Image"
/>
</div><br />
<img id="imgTest" />
</body>
</html>
|
Demo
Following is the result to show or display image based
on the image url entered in textbox using jQuery.
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.