javascript/jquery changing html element based on value entered into text input field

Question

It sounds simple but I am a novice with Javascript and I am having a very tough time trying to find / create this script. I have a list of BIN numbers for credit cards and am trying to grab the first 6 digits of the card number field and check to see what kind of card it is, then displaying the appropriate card logo on screen based on the BIN entered.

I have been able to create a very simple script which checks the input and can change a value or element, but I have not figured out how to do the reverse. I need to be able to remove the card logo and replace it if the user deletes the card and re-enters the card info.

Here is very simple demo. http://jsfiddle.net/6HmxM/653/

$( "input" )

  .keyup(function() {
  if ($( "input" ).val() == 45) {
      var val = "Visa";
  } 
  $( "p" ).text( val )
})

Both of those answers work, depending on if you prefer using a switch or if..else if set of functions. I like this idea of the image appearing and disappearing with input. — Thomas
– Thomas, Commented Nov 8, 2013 at 21:51
@JustAGuy okay just make sure to handle the case when those digits show up later on; for example, in sbeliv01's last fiddle if you were to type in "1234567" visa would still show up even though those 4 digits 4567 don't happen at the first of the string rather later on. — Trevor
– Trevor, Commented Nov 11, 2013 at 16:46

sbeliv01 · Accepted Answer · 2013-11-08 22:01:23Z

1

It's probably best to use a switch in this case to print out a default, which is probably blank. Just set up each case to print out what you want otherwise it will default to whatever is defined in default:.

$( "input" )

  .keyup(function() {

      var $value = $(this).val(),
          output = "";

      switch( $value ) {

          case "45" :
              output = "Visa";
          break;

          case "44" :
              output = "Mastercard";
          break;

          default:
              output = "Nothing";
              break;


      }

      $( "p" ).text( output )
  })

Example: http://jsfiddle.net/6HmxM/655/

Although, you might have to make adjustments to the switch if you're going based on the first 6 characters, likely a RegEx to match the first six, since the output will be nothing unless there is an exact match on every key stroke. In which case you'll likely need something like this:

$( "input" )

  .keyup(function() {

      var $value = $(this).val(),
          output = "";

      switch( true ) {

          case /4567/.test($value) :
              output = "Visa";
          break;

          case /4412/.test($value) :
              output = "Mastercard";
          break;

          default:
              output = "Nothing";
          break;

       }

      $( "p" ).text( output )
  })

Example: http://jsfiddle.net/6HmxM/656/

edited Nov 8, 2013 at 22:01

answered Nov 8, 2013 at 21:42

sbeliv01

11.8k2 gold badges26 silver badges25 bronze badges

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

3 Comments

Trevor Over a year ago

That's great i'm just wondering how you would do the RegEx to only show the output if it matches the first six digits?

Just A Guy Over a year ago

This works great! I didn't think the javascript would be so simple. One more question for you though, I can easily switch the text for the div using the sample code above, would be difficult to change value of an HTML img src for each case as well? I want to display the logo as well, which was not present in my jsfiddle example. Here is an updated example using your case to switch text. jsfiddle.net/6HmxM/658

Just A Guy Over a year ago

FYI - Turns out I don't need to match the full BIN, the first two digits are enough to identify the card number. Currently the case switch script above is dynamically changing the values, so seems to be working. I just need to take a bit further by changing HTML img element as well. en.wikipedia.org/wiki/…

Collectives™ on Stack Overflow

javascript/jquery changing html element based on value entered into text input field

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related