Javascriptを使ってQRコード読み取り、取得した情報をPOSTしたいと思っています。

元ネタは下記のページです。
https://qiita.com/youtoy/items/d94a5bf835d3f4007 …

こちらを見ながらブラウザ上でQRコードを読み取ってコードに含まれる情報を取得するところまでは試すことができました。

実現したいことは、QRコードを読み取って取得した情報（コード）をフォームのテキスト入力欄（<input type="text" id="qrcode" name="qrcode" value="">へ埋め込み、送信ボタンでPOSTしたいと考えています。

元ネタページでは、<DIV>要素に出力（表示）されるようになっていて、サンプルコードをもとに
「<input type="text" id="outputData" name="qrcode">」
みたいなことでできないかと思ってやってみたのですが、うまくいきませんでした。


きっと、詳しい方にとってはとっても簡単なことなのかもしれませんが、ご教授いただきたく、よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/04/28 16:47

こんにちは

code.data に送信したい内容は巣得できているものとします。
フォームから送信する場合、ブラウザはサーバーからの出力待ち状態になりますが、サーバ側の対応はできているものとします。

その上で、例えばHTMLが
<form id="form1" action="hoge.php" method="post">
　<input type="text" name="qrcode" value="" />
</form>
となっているとして、スクリプトから、

const frm = document.getElementById('form1');
frm.querySelector('input[name="qrcode"]').value = code.data;
frm.submit();
のようにすれば、テキストボックスに値をセットして送信します。
（表示する必要がなければ、要素を非表示にしておいてもかまいません）

値をセットするだけで、ボタンを押すのは人が操作するというのであれば、
document.querySelector('#form1 input[name="qrcode"]').value = code.data;
だけで済みます。