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

**Marc31** · 07/07/2023, 11h29

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

**Marc31** · 07/07/2023, 13h18

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"
});

**Doksuri** · 07/07/2023, 13h54

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 ?

**Marc31** · 07/07/2023, 14h24

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.

**Doksuri** · 07/07/2023, 15h41

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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"
});

**Marc31** · 10/07/2023, 10h45

Merci pour votre aide! Bonne journée

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager