I'm trying to get the value of the input to the label field in the QR generator code but not su-CodePudding

Trying to make a dynamic change along with the input that we type, there is a change in the input field . Or Once we submit the input, we get a change in the label? How can we approach it? I am trying to pass the input value but something is wrong

$(document).ready(function(){

// $(".demo").qrcode({
//     text: 'https://www.jqueryscript.net'
//  });


var input = document.querySelector('.input');
var data = input.value;



  $(".demo").qrcode({

    // 0: normal
    // 1: label strip
    // 2: label box
    mode: 1,
    label: "{{name}}",
    fontname: 'sans',
    fontcolor: '#000'
    
  });

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/browse/[email protected]/build/qrcode.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>

  <input type="text" >

<div >
    
</div>

</body>
</html>

CodePudding user response：

You didn't link to the QR lib you are using (and AFAICT someone else's edit of your question confused things even more by linking to a different, wrong QR lib) which makes things harder. My guess is you are using jQuery.qrcode. For future reference you will make it easier for people to help you if you can clearly state what you are using, and create a minimal, complete, and verifiable example - working, complete code which demonstrates your problem.

Next problem is you are using an ancient version of jQuery (1.12.4). Is there a reason for that? Whatever the reason, jQuery.qrcode does not work with that version of jQuery. I tried jQuery 3.3.1, the latest version Stackoverflow snippets list, but that doesn't work either. Finally I checked the demo linked from the jQuery.qrcode home page, viewed that source, and found they are using 3.5.1. And using that version in my snippet works!

So, now we finally have a working set of libraries, on to the actual question.

If you want to update the label dynamically, as you type, you'll need to add an event listener. You could use the change() event, but for a text input that will fire only after you click away or hit enter - so you won't see live typing cause any updates. If you want to see the label update live, as you type, keyup() is the way to go, and I've used that below.

Your handler just needs to

Get the current text;
Remove the old QR code, otherwise you end up with one for each keypress on the page;
Draw a new QR code with that new label;

Here's a working snippet - click Run to see it in action.

$(document).ready(function(){

    // The link "content" of the QR code, the actual message
    var text = 'https://stackoverflow.com/q/71073404/6089612';
    
    var demo = $('.demo');
    var input = $('.input');

    // Simple function to draw the QR code with the specified label
    function drawQR(label) {
        $(".demo").qrcode({
            mode: 1,
            label: label,
            text: text,
            fontname: 'sans',
            fontcolor: '#000'
        });
    }

    // Define an event handler that will fire every time a key is typed
    // in your input
    input.on('keyup', function() {
    
        // First get the current label text
        var label = $(this).val();
        
        // Now remove the existing QR code by emptying the div content
        demo.html('');
    
        // Finally redraw the QR with our new label
        drawQR(label);
    });
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lrsjng.jquery-qrcode/0.18.0/jquery-qrcode.min.js"></script>

Label: <input type="text" >

<div ></div>