I want to compare lastResult value with database qr code value, if both match redirect to a page else show error. My database is phpmyadmin. I'm using laravel 7 but doing this with html and javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>QR Code Scanner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/html5-qrcode"></script>
</head>
<body>
<div id="qr-reader" style="width:500px"></div><br>
<div id="qr-reader-results" style="padding:10px"></div>
<script>
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, result, countResults = 0;
function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) {
++countResults;
lastResult = decodedText;
// Handle on success condition with the decoded message.
// console.log (`Scan result ${decodedText}`, decodedResult);
document.getElementById("qr-reader-results").innerHTML= lastResult;
}
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);
</script>
</body>
</html>
Thanks M. Eriksson. I found the solution. It is done without ajax request.
function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) {
++countResults;
lastResult = decodedText;
// Handle on success condition with the decoded message.
// console.log (`Scan result ${decodedText}`, decodedResult);
// document.getElementById("qr-reader-results").innerHTML= lastResult;
if(lastResult == "{{ auth()->user()->qrcode }}"){
alert("matched");
location.href="/home";
}else{
alert("unmatched");
}
}
}