如何为谷歌表单的预填写链接生成二维码

Question

我想使用 qrcode.js 从谷歌表单的预填充链接创建二维码。 我使用 HTML 表单和 javascript 来连接链接，但不知何故它不会生成链接。

我试图在javascript中连接html表单，但它没有任何链接。

这是我的 html 表单

var qrcode = new QRCode(document.getElementById('qrResult'), {
width: 100,
height: 100
});
function generate() {
var message = 'https://docs.google.com/forms/d/e/1FAIpQLScjDUopQzYa8ng74eNlWOZq9m1WBE1mRV5IRqxCIYfb2GsVvQ/viewform?usp=pp_url&entry.2080694338=' +
document.getElementById('nama').getAttribute('value') +
'&entry.927297386=' +
document.getElementById('gender').getAttribute('value') +
'&entry.1695096350=' +
document.getElementById('tingkat').getAttribute('value') +
'&entry.511033029=' +
document.getElementById('namasekolah').getAttribute('value') +
'&entry.974933260=' +
document.getElementById('wilayah').getAttribute('value') +
'&entry.636055167=' +
document.getElementById('HP').getAttribute('value') +
'&entry.1468104517=' +
document.getElementById('ig').getAttribute('value') +
'&entry.1979673076=' +
document.getElementById('komunitas').getAttribute('value');
if (!message.value) {
alert("Silahkan diisi dulu");
message.focus();
return;
}
qrcode.makeCode(message.value);
}
document.getElementById('testlink').innerHTML = message.value

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<form onsubmit="generate();return false;">
Nama <input type="text" id="nama"><br> Gender <br>
<input type="radio" id="gender" value="Lelaki Sejati" checked> Lelaki Sejati<br>
<input type="radio" id="gender" value="Perempuan Bijak"> Perempuan Bijak<br> Tingkat <br>
<input type="radio" id="tingkat" name="tingkat" value="SD"> SD <br>
<input type="radio" id="tingkat" name="tingkat" value="SMP"> SMP <br>
<input type="radio" id="tingkat" name="tingkat" value="SMA/Sederajat"> SMA/Sederajat <br>
<input type="radio" id="tingkat" name="tingkat" value="Kuliah"> Kuliah <br>
<input type="radio" id="tingkat" name="tingkat" value="Bekerja"> Bekerja <br> Nama Sekolah/Kampus/Kantor <input type="text" id="namasekolah"><br> Wilayah Sekolah/Kampus/Kantor <br>
<input type="radio" id="wilayah" value="Cijantung"> Cijantung <br>
<input type="radio" id="wilayah" value="Cipayung"> Cipayung <br>
<input type="radio" id="wilayah" value="Kampung Melayu"> Kampung Melayu <br>
<input type="radio" id="wilayah" value="Pondok Gede"> Pondok Gede <br>
<input type="radio" id="wilayah" value="Cililitan"> Cililitan <br> Nomor HP/WA <input type="text" id="HP"><br> Akun IG <input type="text" id="ig"><br> Komunitas apa sih yang kamu pengen ? <input type="text" id="komunitas">
<button type="submit">submit</button>
</form>
<p id="testlink">test link</p>
QRcode:
<div id="qrResult" style="height: 100px;width: 100px">
</div>

如果没有消息值，我会使用 alert，每次提交时，它都会一直说没有值。

请帮忙 谢谢

Answer 1

请确保包含最新的Qrcode.js来自下面的github链接： https://raw.githubusercontent.com/davidshimjs/qrcodejs/master/qrcode.min.js

你的方法中的问题是你在哪里传递message.value，而消息不是对象或选择器，它是普通的变量字符串。

$("#submit").click(function(e){
e.preventDefault();
generate();
return false;  
})
function generate() {
var message = 'https://docs.google.com/forms/d/e/1FAIpQLScjDUopQzYa8ng74eNlWOZq9m1WBE1mRV5IRqxCIYfb2GsVvQ/viewform?usp=pp_url&entry.2080694338=' +
document.getElementById('nama').getAttribute('value') +
'&entry.927297386=' +
document.getElementById('gender').getAttribute('value') +
'&entry.1695096350=' +
document.getElementById('tingkat').getAttribute('value') +
'&entry.511033029=' +
document.getElementById('namasekolah').getAttribute('value') +
'&entry.974933260=' +
document.getElementById('wilayah').getAttribute('value') +
'&entry.636055167=' +
document.getElementById('HP').getAttribute('value') +
'&entry.1468104517=' +
document.getElementById('ig').getAttribute('value') +
'&entry.1979673076=' +
document.getElementById('komunitas').getAttribute('value');
var qrcode = new QRCode("qrResult", {
text: message,
width: 100,
height: 100,
});
document.getElementById('testlink').innerHTML = message
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/davidshimjs/qrcodejs/master/qrcode.min.js"></script>
<form>
Nama <input type="text" id="nama"><br> Gender <br>
<input type="radio" id="gender" value="Lelaki Sejati" checked> Lelaki Sejati<br>
<input type="radio" id="gender" value="Perempuan Bijak"> Perempuan Bijak<br> Tingkat <br>
<input type="radio" id="tingkat" name="tingkat" value="SD"> SD <br>
<input type="radio" id="tingkat" name="tingkat" value="SMP"> SMP <br>
<input type="radio" id="tingkat" name="tingkat" value="SMA/Sederajat"> SMA/Sederajat <br>
<input type="radio" id="tingkat" name="tingkat" value="Kuliah"> Kuliah <br>
<input type="radio" id="tingkat" name="tingkat" value="Bekerja"> Bekerja <br> Nama Sekolah/Kampus/Kantor <input type="text" id="namasekolah"><br> Wilayah Sekolah/Kampus/Kantor <br>
<input type="radio" id="wilayah" value="Cijantung"> Cijantung <br>
<input type="radio" id="wilayah" value="Cipayung"> Cipayung <br>
<input type="radio" id="wilayah" value="Kampung Melayu"> Kampung Melayu <br>
<input type="radio" id="wilayah" value="Pondok Gede"> Pondok Gede <br>
<input type="radio" id="wilayah" value="Cililitan"> Cililitan <br> Nomor HP/WA <input type="text" id="HP"><br> Akun IG <input type="text" id="ig"><br> Komunitas apa sih yang kamu pengen ? <input type="text" id="komunitas">
<button id="submit"type="submit">submit</button>
</form>
<p id="testlink">test link</p>
QRcode:
<div id="qrResult" style="height: 100px;width: 100px">
</div>
<div id="qrcode"></div>