Home > DeveloperSection > Forums > How to change image on change url in textbox using jquery?
Ankit Singh

Total Post:341

Points:2389
Posted on    February-23-2015 4:31 AM

 JavaScript JQuery 
Ratings:


 1 Reply(s)
 751  View(s)
Rate this:

Hi I’m trying to change image according to url on textbox.

This is my code:

<input type="text" name="org_img" id="org_img" class="input-xlarge" placeholder="/Images/default-1.jpg" value="/Images/default-1.jpg" />

        <span class="pull-right" id="img_logo">

            <img src="/Images/default-1.jpg" />

        </span>

 

 

function IsValidImageUrl(url, callback) {

        jQuery("<img>", {

            src: url,

            error: function () { callback(1); },

            load: function () { callback(0); }

        });

    }

 

    jQuery('#org_img').change(function () {

        var img_name = jQuery('#org_img').val();

        IsValidImageUrl(img_name, function (val) {

            if (val == 0)

                jQuery('#img_logo').html('<img src="' + img_name + '" width="300px" height="80px" />');

            if (val == 1)

                alert('Please Provide Valid URL Image');

            jQuery('#img_logo').html('<img src="/Images/default-1.jpg" />');

        });

    });

But this code is not work proper what’s problem I don’t know.

Please solve this problem.

Thank you in advance.



Chintoo Semi

Total Post:135

Points:947
Posted on    February-23-2015 6:16 AM

Try this code I think this solution is solve your problem

<input type="text" name="org_img" id="org_img" value="/Images/default-1.jpg" />

 

        <span id="img_logo">

            <img id="image_logo" src="/Images/default-1.jpg" /></span>

function IsValidImageUrl(url, callback) {

        jQuery("<img>", {

            src: url,

            error: function () { callback(1, null); },

            load: function () { callback(0, url); }

        });

    }

 

    $('#org_img').change(function () {

        var img_name = $(this).val();

        IsValidImageUrl(img_name, function (val, url) {

            if (val == 0) {

                $('#image_logo').attr('src', url);

            }

            if (val == 1) {

                alert('Please Provide Valid URL Image');

                $('#image_logo').attr('src', "/Images/default-1.jpg");

            }

        });

    });


Don't want to miss updates? Please click the below button!

Follow MindStick