Change image src depending on an elements value using javascript

Question

I have this html

<div class="fake-input">
               <input type="text" data-theme="a" placeholder="Card Number" id="ccnumber" name="ccnumber" class="textBox input tokenex_data" data-form="ui-body-a" />

        <img id="cc" src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=30 />
        </div>

  <div class="form-group" style="margin-left:0px">
                <input type='hidden' id='ccType' name='ccType'/>
            <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>                   
            </ul>
              </div>

depeding on the value of the hidden input field ccType,I want to change the image src. Th below code is not syntactically correct,its just a demonstration and a raw idea of what im trying to do

if (ccType=="visa")
{
change the image src to 'www.xyz.com/visa.png'
}
if( ccType=="maestro")
{
change image src to 'www.xyz.com/masestro/png'
}

the src inside

    <img id="cc" src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=30 />

should be changed

Im trying to do this using a javascript.This is my fiddle

http://jsfiddle.net/DMx8a/

Satpal · Accepted Answer · 2013-12-26 15:59:14Z

2

Use .attr(), it set attributes for the set of matched elements.

 $('#cc').attr('src', 'www.xyz.com/visa.png')

Code

if (ccType=="visa")
{
    $('#cc').attr('src', 'www.xyz.com/visa.png');
}
if( ccType=="maestro")
{
    $('#cc').attr('src', 'www.xyz.com/masestro/png');
}

DEMO

EDIT

$("#ccnumber").on('blur', function () {
    var ccType = $(this).val();
    if (ccType == "visa") {
        $('#cc').attr('src', 'https://i.sstatic.net/aMCHQ.png?s=32&g=1');
    }
    if (ccType == "maestro") {
        $('#cc').attr('src', 'https://www.gravatar.com/avatar/9edb7a1c14bbcbeaa16bd9149764c3c6?s=32&d=identicon&r=PG&f=1');
    }
})

DEMO with blur event on ccnumber textbox

edited Dec 26, 2013 at 15:59

answered Dec 26, 2013 at 15:26

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Satpal Over a year ago

@user3128920, try jsfiddle.net/DMx8a/8. Give some sample input for card type so that I test it at my end and delete all previous comments.

user3128920 Over a year ago

sample input is 404 starting will be "visa" 622 starting will be maestro

Satpal Over a year ago

@user3128920, Used $("#ccType").on('change', function () { instead of $("#ccnumber").on('blur', function () {

tymeJV · Accepted Answer · 2013-12-26 15:27:39Z

0

Or just regular JS:

var image = document.getElementById("cc");
if (ccType=="visa")
{
    //change the image src to 'www.xyz.com/visa.png'
    image.src = 'www.xyz.com/visa.png'
}
if( ccType=="maestro")
{
    //change image src to 'www.xyz.com/masestro/png'
    image.src = 'www.xyz.com/masestro/png'
}

answered Dec 26, 2013 at 15:27

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

Siva Tumma · Accepted Answer · 2013-12-26 15:28:31Z

0

If you are using plain javascript, go for the following: document.getElementById('cc').setAttribute('src', 'www.xyz.com/visa.png');.

Like :

var imageElement = document.getElementById('cc');
if (ccType=="visa"){imageElement.setAttribute('src','www.xyz.com/visa.png');}
if( ccType=="maestro"){imageElement.setAttribute('src', 'www.xyz.com/masestro/png');}

answered Dec 26, 2013 at 15:28

Siva Tumma

1,70112 silver badges23 bronze badges

Collectives™ on Stack Overflow

Change image src depending on an elements value using javascript

3 Answers 3

EDIT

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT

3 Comments

Comments

Comments

Related