javascript - Scan QR Code value into an input field after successful scan

This is the scanner I am using...

It's working 100%. But I need to add some custom extra's.

When the QR Code is scanned it outputs my result into this paragraph tag.

<p id="scanned-QR"> The scanned code text value is printed out here </p>

However I need it to be an input field so I can use it's value in a url.

How can I set an input field equal to the value submitted to the Paragraph tag?

I have tried these methods and they failed :

Method 1

<input id="scanned-QR"> The scanned code text value is printed out here </input>

Method 2

<p id="scanned-QR" onchange="update"></p>
 <input id="code_id_value" type="text" name="" value="">
<br>

<script>
 function update(){
  var code_id_value = document.getElementById("scanned-QR").innertext;
  document.getElementById("code_id_value").value = code_id_value;
 }
</script>

This is the scanner I am using...

https://github./takanori-matsushita/webcodecamjs

It's working 100%. But I need to add some custom extra's.

When the QR Code is scanned it outputs my result into this paragraph tag.

<p id="scanned-QR"> The scanned code text value is printed out here </p>

However I need it to be an input field so I can use it's value in a url.

How can I set an input field equal to the value submitted to the Paragraph tag?

I have tried these methods and they failed :

Method 1

<input id="scanned-QR"> The scanned code text value is printed out here </input>

Method 2

<p id="scanned-QR" onchange="update"></p>
 <input id="code_id_value" type="text" name="" value="">
<br>

<script>
 function update(){
  var code_id_value = document.getElementById("scanned-QR").innertext;
  document.getElementById("code_id_value").value = code_id_value;
 }
</script>

Share Improve this question edited Sep 13, 2023 at 10:15 asked Jan 25, 2018 at 0:41 13garth 8031 gold badge10 silver badges24 bronze badges

If you look into the example in the website you enclosed, you can get the decode value through init with this arg: var arg = { resultFunction: function(result) { /* result.format: code format, result.code: decoded string, result.imgData: decoded image data */ } }; – Sphinx Commented Jan 25, 2018 at 0:48
You could just use .innerHTML to get or set the text of DOM Elements that are not <input />s. There's no real reason to put the text into an input, since you have the info already, unless you're trying to do old school form submission. I remend AJAX. – StackSlave Commented Jan 25, 2018 at 0:50

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

The key that you're missing is that the T in .innertext needs to be capitalised (as .innerText).

In addition to this, using inline event handlers is bad practice, and you should consider using .addEventListener() instead of onchange.

This can be seen working in the following:

document.getElementById("scanned-QR").addEventListener("click", update);

function update() {
  var code_id_value = document.getElementById("scanned-QR").innerText;
  document.getElementById("code_id_value").value = code_id_value;
}

// Demo
update();

<p id="scanned-QR">Text</p>
<input id="code_id_value" type="text" name="" value="">

Hope this helps! :)

So this is the solution I came up with.

Here's my paragraph and input function

<p id="scanned-QR" onchange="update">SCAN.BZ</p>
<input id="code_id_value" type="text" name="" value="">

Here's my function. WITH a interval for every millisecond or faster "I think it's every millisecond".

It runs smoothly and doesn't lag. and the result is practically immediate.

<script type="text/javascript">
 setInterval(update,1);
   function update() {
      var code_id_value = document.getElementById("scanned-QR").innerHTML;
      document.getElementById("code_id_value").value = code_id_value;
    }
    update();
</script>

Thanks for the help "Obsidian Age" Really appreciate it. :)

The modified example to write to a field is the following code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <h3>Simple initalization with default settings</h3>
        <hr>
        <canvas></canvas>
        <hr>
        <ul></ul>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/qrcodelib.js"></script>
        <script type="text/javascript" src="js/webcodecamjquery.js"></script>
        <script type="text/javascript">
            var arg = {
                resultFunction: function(result) {
                    document.getElementById("code_id_value").value = result.code;
                }
            };
            $("canvas").WebCodeCamJQuery(arg).data().plugin_WebCodeCamJQuery.play();
        </script>
        
        
        <p id="scanned-QR">Text</p>
        <input id="code_id_value" type="text" name="" value="">
    </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Scan QR Code value into an input field after successful scan - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)