Générer un QR CODE avec les données d'un formulaire

Version imprimable

07/07/2023, 11h29
Marc31

Générer un QR CODE avec les données d'un formulaire

Bonjour,

j'aimerais generer un QR Code en javascript et mettre les données d'un formulaire dedans.

Comment dois je faire, svp ?

J'ai trouvé ceci mais j'arrive pas à faire le lien avec mes données du formulaire : https://www.243tech.com/creer-qr-cod...oogle_vignette

Merci

Comment generer un QR CODE avec les données d'un formulaire en javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Créer et personnaliser un QR Code avec Javascript, HTML et CSS</title>
<meta charset="utf-8″>
</head>
<body>
<div id="qrcode"></div>
 
<script src="qrcode.js"></script>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
* {
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
 
html,
body {
height: 100%;
}
 
body {
display: flex;
align-items: center;
justify-content: center;
background: #040404;
}
 
#qr {
position: relative;
}
 
#qr::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
 
/* ne mettez pas une taille trop grande. sinon le qr code ne sera plus lisible */
width: 36%;
height: 36%;
border-radius: 50%;
 
background: url("https://www.243tech.com/avatar.png") no-repeat center;
background-size: cover;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
const href = "https://www.243tech.com";
const size = 300;
 
new QRCode(document.querySelector("#qrcode"), {
text: href,
width: size,
height: size,
 
colorDark: "#000014",
colorLight: "#0099ff"
});

07/07/2023, 13h54
Doksuri

Citation:

Tout d’abord, commencez par télécharger la bibliothèque qrcodeJS sur ce lien : qrcodejs

Et ensuite extrayez-le.

Vous pouvez maintenant utiliser le fichier qrcode.js et qrcode.min.js dans votre projet.

as-tu fais cette etape ?

si oui, quel est le probleme ? une erreur quelconque dans la console ?
07/07/2023, 14h24
Marc31

Comment generer un QR CODE avec les données d'un formulaire en javascript

oui j'ai fais ceci mais mon probleme c'est de créer un QRCode et de mettre les informations du genre nom, prenom dedans.

Code:

1
2
3
4
5
6
7
8
new QRCode(document.querySelector("#qrcode"), {
text: href, // <------- ici tu change "href" par les donnes de ton formulaire parsed en string JSON.stringify(ta_data)
width: size,
height: size,
 
colorDark: "#000014",
colorLight: "#0099ff"
});

10/07/2023, 10h45
Marc31

Générer un QR CODE avec les données d'un formulaire

Merci pour votre aide! Bonne journée