How to generate qr code for pre-filled link of google form

user_9702437 0
Viewed 127

I want to create QR code from pre-filled link of google form using qrcode.js. I use HTML form and javascript to concatenate the link but somehow it wont generate the link.

I tried to concatenate the html form in javascript but it doesn't any link.

Here is my html form

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>

I use alert if there is no message value and everytime i submit, it keep saying there is no value.

Please help Thank you

html javascript
1 Answers

Please make sure to include the latest Qrcode.js from github link below: https://raw.githubusercontent.com/davidshimjs/qrcodejs/master/qrcode.min.js

Problem in your method was you where passing message.value , while message is not an object or selector it is normal variable string.

$("#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>

user_117334660
Related