Parse credit card with javascript from card reader

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Parse Credit Card Swipe into Text Fields Example">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript,credit card parse">
  <meta name="author" content="Chris Smith / Zynimus Company / zynimus.com">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CC Test</title>
</head>
<style>
body {
font-family:verdana;
font-size:15px;
}

</style>
</head>
<body>
<h1>Parse Credit Card Swipe into Text Fields</h1>
<div id="ccScanField">
Please swipe credit/debit card: <br>
<input type="password" name="cardSwipe" id="cardSwipe" autofocus onChange="cardSwipe()" /><br />
</div>
<div id="cardInfo" style="display: none">
Card number: <input type="text" name="ccNumber" id="ccNumber"><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Last 4: <input type="text" name="last4" id="last4"><br />
Card exp month: <input type="text" name="ccExpMo" id="ccExpMo"><br />
Card exp year: <input type="text" name="ccExpYr" id="ccExpYr"><br />
Card holder name: <input type="text" name="ccFname" id="ccFname">  <input type="text" name="ccLname" id="ccLname"><br />
</div>
</body>
</html>

<script type="text/javascript">
function cardSwipe(){
// hide the scanned data
document.getElementById('ccScanField').style.display='none';
document.getElementById('cardInfo').style.display='';
//get the swiped card data:
var str=document.getElementById("cardSwipe").value;

// Pull card number:
var cc = str1[0].substr(2);
var last4 = cc.substr(12);
document.getElementById('ccNumber').value =cc;
document.getElementById('last4').value =last4;

// Pull card holder name:
var names = str1[1].split('/');
document.getElementById('ccLname').value =names[0];
document.getElementById('ccFname').value =names[1];

// Pull Exp Date
var date = str1[2].slice(0,4);
var expYr = date.slice(0,2);
var expMo = date.slice(2,4);
document.getElementById('ccExpMo').value =expMo;
document.getElementById('ccExpYr').value =expYr;
}
</script>
<!-- Card Swip Example
//Master Card Testing Number
%B5553042241984105^TESTER/TEST^2307000000000000000000000000000?;5553042241984105=23070000000000000000?
Card Swip Example -->