Peyman Etedali Peyman Etedali - 2 months ago 5
CSS Question

change background image when input value changes

i'm looking for a script, wich changes the background image of an div container when spefic numbers are into the input field.

I build this creditcard layout here

credit card

inside of it is a

<input type="text" name="" class="credit-input">
with the class
credit-input
.

What i'm looking for is, that if the first three numbers inside the value generate a different background.

So for example, when the value starts with 411, there should be a background image of an amex card, or when it starts with 311, there should be mastercards and so on.

there would be in total 4 different backgrounds.

i'm not so good in js, so i hope that i could find here some help from ya.

That's how my
html
looks at the moment.The
class="jp-front"
includes the whole style at the moment the

<div class="jp-front">
<input type="text" name="" class="credit-input">
</div>


thx for any help

Answer

Try this :

$(document).ready(function() {

    $(".credit-input").on("input",function(){

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

        if (value == "411") 
            $(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});

        else if (value == "311")
            $(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});

    })

})

Final code :

$(document).ready(function() {
  
  $(".credit-input").on("input",function(){
    var value = $(this).val();
    
    if (value == "411") 
      $(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});
    
    else if (value == "311")
      $(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});
            
        })
                
    })
            
.jp-front {
  width: 300px;
  height: 150px;
  border: 1px solid #000;
  background-size:100% 100%;
  background-repeat: no-repeat;
  padding: 20px 0px 0px 20px;
}
<div class="jp-front">
  <input type="text" name="" class="credit-input">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   
    

Comments