'(PHP) - How to Fetch data in realtime once QR code scanned

How can I fetch all data in realtime once my QR code show its MAC Address that is also stored in my db? I can display the value of the QR but I want to display the whole row from my db of that scanned MAC Address. I'm using InstaScan btw. I hope that someone can help me regarding this. Thank you!

Here is my code below..

<?php

    session_start();
    include 'config.php';

    !$_SESSION['admin-logged'] ? header("Location: login.php?access denied") : '';

?>

<!DOCTYPE html>
<html lang="en">
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Page</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                <div class="card p-3">
                    <h2 class="text-center">Scan QR Code:</h2>
                    <video id="preview" width="100%"></video>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card p-5">
                    <h3 class="text-center">QR Code Information</h3>
                    <hr>
                    <div class="fields">
                        <!-- THIS IS MY MAC ADDRESS FIELD -->
                        <label for="mac">MAC Address</label>
                        <input type="text" name="mac" id="mac" readonly class="form-control text-success font-weight-bold">
                        
                        <!-- BUT ALSO I WANT TO DISPLAY THE NAME, LOCATION, ETC IN REALTIME -->
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" readonly>
                        <label for="loc">Location</label>
                        <input type="text" name="loc" id="loc" readonly>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <script>
        let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
           Instascan.Camera.getCameras().then(function(cameras){
               if(cameras.length > 0 ){
                   scanner.start(cameras[0]);
               } else{
                   alert('No cameras found');
               }

           }).catch(function(e) {
               console.error(e);
           });

           scanner.addListener('scan',function(c){
               document.getElementById('mac').value=c;
           });
    </script>
    <script src="main-js/main.js"></script>
</body>

</html>
javascriptphp


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions