How can I grab a div in PHP that's in a loop within a javascript function

Question

Below is the code.

under the function there is a resultContainer.innerHTML that populates a list of QR codes scanned. How can $_POST the values in PHP so that I can send it in an email format? I tried adding a name within the div (<div **name="qrOutput"**>[${countResults}] - ${qrCodeMessage}</div>) but PHP does not pick it up. Only returns an empty string.

I also tried giving the <div id="qr-reader-results"></div> element a name but because the output is within another div inside this div I also got an empty result.

Thanks a lot for any help.

<!-- start -->
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>


<div id="root"></div>
<script>
  function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" ||
      document.readyState === "interactive") {
      // call on next available tick
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  docReady(function() {
    var resultContainer = document.getElementById('qr-reader-results');
    var lastResult, countResults = 0;

    function onScanSuccess(qrCodeMessage) {
      if (qrCodeMessage !== lastResult) {
        ++countResults;
        lastResult = qrCodeMessage;
        resultContainer.innerHTML += ***`<div">[${countResults}] - ${qrCodeMessage}</div>`;***
      }
    }

    var html5QrcodeScanner = new Html5QrcodeScanner(
      "qr-reader", {
        fps: 10,
        qrbox: 250
      });
    html5QrcodeScanner.render(onScanSuccess);
  });
</script>
<p id="QRout"></p>

possible to share the url where this code is implemented? – Momin IqbalAhmed Jan 21 '21 at 06:22 — Momin IqbalAhmed, Jan 21 '21 at 06:22

ZecKa · Accepted Answer · 2021-01-21T08:43:55.440

You can store your results in an other variable when you add it to the DOM.

Declare a variable to store your results

var myResults = [];

When you add the result to the DOM add also the results in array variable

// ...
resultContainer.innerHTML += `<div>[${countResults}] - ${qrCodeMessage}</div>`;
myResults.push({count: countResults, message: qrCodeMessage})

Then you can use myResult var on a POST request

myCustomPostFunction('/yourUrl/', myResult);

The "myCustomPostFunction" will depend on the way you want to send the data

Check this codepen: https://codepen.io/zecka/pen/VwKNpze

Post request like a form submit

If you want to send the data to the current page like a form post, you can find an example here: https://stackoverflow.com/a/133997/2838586

Post request to a rest api

Fetch: POST json data

If answer is ok for you, you can mark it as "accepted answer" — ZecKa, Jan 22 '21 at 09:23

How can I grab a div in PHP that's in a loop within a javascript function

1 Answers1

Post request like a form submit

Post request to a rest api