Why doesnt the image come inside my text field

Question

HTML

 <div>
                     <input type='text' id='ccType' name='ccType'/>
            <ul style="list-style-type: none;" class="cards">
            <li class="visa"></li>
            <li class="visa_electron"></li>
            <li class="mastercard"></li>
            <li class="maestro"></li>                   
            </ul>
                 </div>

            <div class="form-group">
              <label class="control-label">Card Number</label>
            </div>



        <div class="fake-input">
               <input type="text" placeholder="Card Number" id="ccnumber" name="ccnumber" class="form-control"/>

        <img id="cc" src="" width=30 />
        </div>

I have this html which has a text field in which when card number is typed it will detect the number whether its visa/maestro/whatever and set the value to ccType element.I have a javascript JS

$( window ).load(function() {

$("#ccType").on('change', function () {
    var ccType = $(this).val();
    if (ccType == "visa") {

            $('#cc').attr('src', 'http://www.fethr.com/webapp/images/visa.png');
    }
    if (ccType == "maestro") {
        $('#cc').attr('src', 'http://www.fethr.com/webapp/images/maestro.png');
    }
    if (ccType == "mastercard") {
        $('#cc').attr('src', 'http://www.fethr.com/webapp/images/mastercard.png');
    }
    if (ccType == "visa_electron") {
        $('#cc').attr('src', 'http://www.fethr.com/webapp/images/visaelectron.png');
    }
})


 });

which i made to set the image inside the text field.I have the following css for the img and text field CSS

.fake-input { position: relative;  }
.fake-input input { border:none: background:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 9px; right: 5px }

But the image script doesnt seems working or I cant show image inside the text field? Any help

FIDDLE

http://jsfiddle.net/tKVmt/

you can't put an image in a textbox like this. You need to use a background image instead. My advice would be to define a class for each card type, with the proper background-image, and then dynamically change the class of the control depending on the user input. — Laurent S., Dec 30 '13 at 16:13
**Warning**: if you use `src=""` by default, some browsers will attempt to download the current page! Instead, don't set the `src` attribute. You can see in [bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=444931) how it was fixed in Firefox. — Oriol, Dec 30 '13 at 16:31

score 3 · Accepted Answer · answered Dec 30 '13 at 16:16

It's because you're putting your event listener inside a window.load event and it's getting bound before your textfield is in the DOM.

Remove that $( window ).load(function() { wrapper or replace it with a DOM ready $(function() { and it'll work.

http://jsfiddle.net/tKVmt/2/

score 1 · Answer 2 · answered Dec 30 '13 at 16:16

1

The issue is that you have that function as an argument to $(window).load()

Just take the method out of $(window).load() and it works as intended.

answered Dec 30 '13 at 16:16

rdodev

3,164
3
26
34

Why doesnt the image come inside my text field

2 Answers2