too long

Question

I am trying to make a QR code scanner using Vue.js and instascan. I have already done the scanning part. Now I am stuck in this process where I have to retrieve the data from MySQL using an Ajax request. I can't seem to retrieve the data from the input form.

Here is my HTML code:

    <form id="cont_disp" method="post">
    <label class="disptext" style="margin-left: 41%;">Load user credits</label>

    <div class="form-group" id="app">
        <input v-for="scan in scans" :key="scan.date" hidden :title="scan.content" class="form-control" id="qr_user" name="qr_user" placeholder="Scan User QR Code":value="scan.content" style="width: 15%; font-size: 20px; left: 44%; position: absolute; top: 30%; border: 0; background: transparent;">
    </div>
    <div class="video-container">
        <video id="preview"></video>
    </div>


    <div class="content-display">

            <label class="disptext" style="font-size: 20px;">Username: </label>
            <input type="button" name="" class="login" value="Search" style="margin-left: 70%; font-size: 20px;" id="qr_search">
            <br /><br />
            <label class="disptext" style="font-size: 20px;">Current Balance: </label><input type="text" class="disptext" id="userbal" style="font-size: 20px; left: 44%;"><br /><br />
            <label class="disptext" style="font-size: 20px;">Enter credit amount: </label><input type="number" name="loadcred" id="loadcred" style="margin-left: 28%;" required placeholder="Credit amount"><br /><br />
            <input type="submit" name="credsub" id="credsub" value="Load Credits" class="login" style="width: 50%; margin-top: 3%;">

    </div>
</form>

And here is the php query.

   include 'dbcon.php';
   $qr_user = $_POST['qr_user'];
   $query = mysqli_query($con, "SELECT username, credits FROM useracc WHERE username='$qr_user'");
   $row = mysqli_fetch_array($query);
   echo json_encode($row);

And the Ajax request:

  $("#qr_search").click(function(){
    var qr_user = $("#qr_user").val();
    $.ajax({
        type: "post",
        url: "../Capstone/qrdata.php",
        data: formData = {username:qr_user},
        success: function(data){
            // can't seem to do anything here since I can't fetch any data from php
        }
    });
});

Answer 1

Change this:

$qr_user = $_POST['qr_user'];

to:

$qr_user = $_POST['username'];

to solve the issue because the name is mismatched.