Using Multiple Input to Generate QR code

Question

I am currently using this code for QR code generator from one input field:(HTML and Javascript) I want to have multiple input, like guest name, and event title, event date, location to be as one part to form or generate QR code. Note that event title and date is going to be filled one time, while guest name is going to be multiple, as the goal is to have unique QR code per each guest.

So the final result should be event title, date and location as well as QR code are going to be embedded as 1 photo. Is that possible?

Thanks -Tarneem

var qrcode = new QRCode("qrcode");

function makeCode () {      
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        elText.focus();
        return;
    }
    
    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });

                  <input id="text" type="text" placeholder="Enter guest name"  class="contactField" /><br />
 <div id="qrcode" ></div>

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

Yes, and it's very easy actually, just concat them:

var location = 'exampleLocation';
// Some other information or methods how you get the info here 

var qrCodeString = location+ ', ' +$('#name').val();
qrcode.makeCode(elText.value( qrCodeString );

Your code doesn't show where you get the location and event info from, but you can just add them to the QR generator. According to this answer you can have about 4.000 characers in as max length of the string.

edited May 23 '17 at 12:31

Community

1
1

answered May 25 '16 at 16:22

Martijn

15,791
4
36
68

actually the info is going to be input, means the user will type it. I tried your code but once I combine it with the QRcode script, the QR code figure disappear – Tarneem Jun 12 '16 at 16:53
If you can get me, I need to do this one in the video: https://www.youtube.com/watch?v=-LMjceCl1k8 – Tarneem Jun 12 '16 at 17:11

score 0 · Answer 2 · answered Oct 19 '21 at 13:54

Use qrcode libary https://www.npmjs.com/package/qrcode

var QRCode = require('qrcode')

let qrcod_url = await QRCode.toDataURL([
{ data: 'Confidential \n', mode: 'byte' },
{ data: `Date: ${moment(created_at).format('MM-DD-YYYY')}\n`, mode: 'byte'},
{ data: `Gender : ${customerGender}\n`, mode: 'byte' },
])

Using Multiple Input to Generate QR code

2 Answers2