Credit Card Swiper Javascript Keeps Going

Question

I've got a script that binds to the keyup event as a page is loaded, this sets the cursor into the first field and then when the credit card is swiped it chops up the magnetic stripes data, but currently the code seems to be running multiple times and I'm not sure how to just have it run once.

Here is the pertinent code:

<script type="text/javascript">

        window.onload = function () {
            $("#cn").focus();
            $("#cn").bind("keydown keyup", doItPlease);
        }
        function doItPlease() {
            var count = 0;
            if ($(this).val().indexOf('?') !== -1 && count < 1) {
                setFromCCS($(this).val())
                count++;
            }
        }
   </script>

Here is a link to the full code: http://paste2.org/p/1693324

UPDATE 1:

Adding $(document).ready(function()) solved a good chunk of the issue but I'm still not getting the result I need. It still is running twice since there are two question marks (?) in the string that is being input. Is there any easy way to limit this to run only once?

Current code: http://paste2.org/p/1693577

UPDATE 2:

Okay, so I've got a working solution, one where the script will re-parse the string and replace it. I feel like this is a hack and there is a better way to do it, just not sure how at the moment. Here is the code:

$(document).ready(function () {
        var count = 0;

        $("#cn").focus();

        $("#cn").keyup(function () {
            if ($(this).val().indexOf('?') !== -1 && count < 1) {
                var magstripe = $(this).val().substring(0, $(this).val().indexOf('?'));
                setFromCCS(magstripe);
                count++;
            }
            else if ($(this).val().indexOf('?') !== -1 && count > 0) {
                $("#cn").val($(this).val().substring(0, $(this).val().indexOf(';')));
            }
        });
    });

Here is the MagStripe thats being parsed: %B9999999999999999^AAAAAAA/AAAAAA^1204101 999?;B9999999999999999=120410110000999?

Most likely your barcode scanner is sending over the data as simulated keypresses, so for each "key", you're firing up your function. If you know in advance how long the data is, you should simply ignore the keypress until the whole data string is present. — Marc B, Oct 06 '11 at 19:08

score 2 · Accepted Answer · answered Oct 06 '11 at 19:07

2

You're using jQuery, so please use it properly:

$(document).ready(function() {
  var count = 0;

  $("#cn").focus();

  $("#cn").bind("keydown keyup", function() {
    if ($(this).val().indexOf('?') !== -1 && count < 1) {
      setFromCCS($(this).val())
      count++;
    }
  });
});

You need to use $(document).ready(), as it runs the JS properly when the DOM is ready.

answered Oct 06 '11 at 19:07

Blender

289,723
53
439
496

This does indeed solve most of the issue, I hadn't realized how important it is, especially after running it alongside firebug. However, I have an issue now where the value that is in the box maintains and isn't cleared out and replaced properly. But when I run firebug and step through it it works fine, any ideas? – Charlie Oliver Oct 06 '11 at 20:14

Credit Card Swiper Javascript Keeps Going

UPDATE 1:

UPDATE 2:

1 Answers1