CODEWITHSUNDEEP
jquery
Manoj Singh
Manoj Singh

Reputation: 7707

Replacing image src with input hidden value using Jquery

I have below input hidden with value ="/fr/images/findacourse_logo_tcm10-268.gif".

<input type="hidden" id="Qt_Email_Image" value="/fr/images/findacourse_logo_tcm10-268.gif"/>

I have another input image below with src = "/images/quote/Quote_Email_Button.JPG"

<tr>
    <td>
         </td>
    <td colspan="2" class="">
        <input type="image" border="0" alt="Email me this quote " src="/images/quote/Quote_Email_Button.JPG" id="Quote_btnEmail" name="Quote:btnEmail"/>
    </td>
</tr>

Now I want at runtime the input image src gets replaced with above input hidden value and will show above image instead of image link in src. So that my above html becomes

<tr>
    <td>
         </td>
    <td colspan="2" class="">
        <input type="image" border="0" alt="Email me this quote " src="/fr/images/findacourse_logo_tcm10-268.gif" id="Quote_btnEmail" name="Quote:btnEmail"/>
    </td>
</tr>

I want to use Jquery for above solution, please suggest!

Thanks.

Upvotes: 1

Views: 1978

Answers (3)

Vilius Paulauskas
Vilius Paulauskas

Reputation: 3261

Note that when you replace image like this:

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').attr('value'))

Then your current image "Quote Email Button.JPG" is being removed, then new image "findacourse logo tcm10-268.gif" is loaded and then shown. So if the loading part takes a while, then the user will see a flicker.

To avoid that, you can load your "findacourse logo tcm10-268.gif" first and then instantly show it to the user:

var img = new Image();
$(img).load( function () {
    $('#Quote_btnEmail').attr('src', img.src);
});
img.src = $('#Qt_Email_Image').val();

Upvotes: 3

Emil Ivanov
Emil Ivanov

Reputation: 37633

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').val());

Is that what you need?

Upvotes: 1

duckyflip
duckyflip

Reputation: 16499

This should work for you:

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').attr('value'))

Upvotes: 0

Related Questions