How do I get a variable value from javascript function to python function in django

I am trying to scan QR code using html,javascript as shown below by nurse_home.html. I am able to scan and see the content of the QR code on the website but I can't POST and write it into my database shown on views_nurse.py. Any help is greatly appreciated!

<nurse_home.html>

{% load static %}

{% block mainbody %}


<title>Django Online Barcode Reader</title>
<meta charset="utf-8">
 
{% csrf_token %}

<script src={% static "js/html5-qrcode.min.js" %}></script>
<style>
  .result{
    background-color: green;
    color:#fff;
    padding:20px;
  }
  .row{
    display:flex;
  }

</style>

{% csrf_token %}
<div class="row">
  <div class="col">
    <div style="width:500px;" id="reader"></div>
  </div>
  <div class="col" style="padding:30px;">
    <h4>Scanned Result</h4>
    <!--<div id="result" name="result">Result Here</div>-->
    <output type="POST" id="result" name="result" placeholder="qrCodeMessage">
      {% csrf_token %}
  </div>
</div>

<script type="text/javascript">
  function onScanSuccess(qrCodeMessage) {
    document.getElementById('result').innerHTML = '<span class="result">'+qrCodeMessage+'</span>';
  }

  function onScanError(errorMessage) {
  //handle scan error
  }

  var html5QrcodeScanner = new Html5QrcodeScanner(
      "reader", { fps: 10, qrbox: 250 });
  html5QrcodeScanner.render(onScanSuccess, onScanError);

</script>

{% endblock %}

<views.py>

def nurse_home(request):    
  return render(request, 'nurse_home.html')

<views_nurse.py>

@api_view(['GET',"POST"])
# Nurse scans QR
def nurse_qrscan(request):
    ### Test! nurse: QR
    if request.method == 'POST':
        result = request.POST.get("result")

        # Saving the result to database, nurse_QR
        qr_output = nurse_QR(output=result)
        qr_output.save()
        return Action.success("Successful")

<urls.py>

from hospital import view_nurse
from . import views

urlpatterns = [
    # Main Page
    path('', views.login, name='login'),
    path('nurse/', views.nurse_home),
    path('nurse_home/', views.nurse_home),

    # Nurse
    path('nurseLogin', view_nurse.nurseLogin, name='nurseLogin'),
    path('nurse_qrscan', view_nurse.nurse_qrscan, name='nurse_qrscan'),
]

Do this in your <script> tag:

// Create a function to get the CSRF token
function getCookie(name) {
  let cookie = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  return cookie ? cookie[2] : null;
}

function onScanSuccess(qrCodeMessage) {
  document.getElementById("result").innerHTML =
    '<span class="result">' + qrCodeMessage + "</span>";

  // Call the function here
  sendQrCode(qrCodeMessage);
}

async function sendQrCode(qrCode) {
  const response = await fetch("/nurse_qrscan", {
    method: "POST",
    headers: {
      "X-CSRFToken": getCookie("csrftoken"),
    },
    body: JSON.stringify({
      result: qrCode,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      // Do your thing here.
    });
}

function onScanError(errorMessage) {
  //handle scan error
}

var html5QrcodeScanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: 250,
});
html5QrcodeScanner.render(onScanSuccess, onScanError);

Let me know which part troubles you for further explanation.

Here is a breakdown.

First, you get the CSRF token from your form with the following:

function getCookie(name) {
  let cookie = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  return cookie ? cookie[2] : null;
}

Second, after generating the qrcode in the onScanSuccess callback, you invoke sendQrCode function with the qr code as argument:

function onScanSuccess(qrCodeMessage) {
  document.getElementById("result").innerHTML =
    '<span class="result">' + qrCodeMessage + "</span>";

  // Call the function here
  sendQrCode(qrCodeMessage);
}

Third, you use Fetch to send a POST request to nurse_qrscan route:

async function sendQrCode(qrCode) {
  const response = await fetch("/nurse_qrscan", {
    method: "POST",
    headers: {
      // You pass the CSRF token generated from the function
      "X-CSRFToken": getCookie("csrftoken"),
    },
     // Create an object with `result` as property 
     // and the `qrCode` as value.
     // After that, convert it to JSON
     body: JSON.stringify({
       result: qrCode,
     }),
  })
    ....

It is a POST method because of method: "POST"

Following that, you write functionality to handle the data returned from your Django view:

async function sendQrCode(qrCode) {
    ...
    .then((response) => response.json())
    .then((data) => {
      // Do your thing here.
    });
}
Back to Top