Use value from input field where value is a return form JS

Question

Case:

I'm trying to build a qr-reader to lookup a value, see here :

What works: scanning. If I scan a code, a value is returned in the text box. Code used:

<script type="text/javascript" src="https://www.meijerit.be/qr_packed.js"></script>
<input type=text id="qr-result" class=qrcode-text placeholder="Tank ID code"><label class=qrcode-text-btn>
    <input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1>
</label>

<script type="text/javascript">
    function openQRCamera(node) {
        var reader = new FileReader();
        reader.onload = function() {
            node.value = "";
            qrcode.callback = function(res) {
                if (res instanceof Error) {
                    alert("Geen QR-code gevonden. Zorg dat de code volledig in beeld is en probeer het opnieuw.");
                } else {
                    node.parentNode.previousElementSibling.value = res;
                }
            };
            qrcode.decode(reader.result);
        };
        reader.readAsDataURL(node.files[0]);
    }

    function showQRIntro() {
        return confirm("Gebruik de camera om een foto van de QR-code te maken.");
    }
</script>

What works too: Get value from qr-result and put into lookup field when typed manually:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#qr-result').change(function() {
            var sourceField = $('#qr-result').val();
            $('#field_b9ip5').val(sourceField);
            $('#field_b9ip5').trigger({
                type: 'change',
                originalEvent: 'custom'
            });
        });
    });
</script>

What is the problem and what is my question:

If I type a value into qr-result manually, the value is used in the TankID field (field_b9ip5) and looked up in the backend.

However, when I scan a qr-code, the script returns the value scanned but for some reason, the jQuery script doesn't pick it up for further processing.

Can someone point me in the right direction on how to use the value in qr-result when not typed manually?

Thanks in advance!

Answer 1

I just had a similar problem, and I think this should fix it. The solution is to show the script the fact that the input's value was changed. Try this:

if (res instanceof Error) {
  alert("Geen QR-code gevonden. Zorg dat de code volledig in beeld is en probeer het opnieuw.");
} else {
  node.parentNode.previousElementSibling.value = res;
  node.parentNode.previousElementSibling.dispatchEvent(new Event('change'));
  // ^^ Use dispatchEvent() to trigger a change event
}

You need to push through the change event since programmatic changes aren't picked up.