Skip to content
Advertisement

Split String and insert it in different input

can you please help me how to split a string in an input and insert those split strings into different inputs? I already tried some codes that I found here but it still didn’t work.

I actually want to store the string in that 2 different inputs (those not hidden) after exectuting the functions

This is the source code:

function split() {
  var strings = $("#qrstring").attr("value").split("<br>");
  if (strings.length == 2) {
    qrData(strings, 1);
  }
}

function qrData(value, index) {
  if (value.length == 2) {
    $(".idnum").attr("value", value[0]);
    $(".idname").attr("value", value[1]);
  } else {
    alert("malformed strings");
  }
}

let scanner = new Instascan.Scanner({
  video: document.getElementById('preview'),
  mirror: false
});
scanner.addListener('scan', function(c) {
  window.document.getElementById('qrstring').value = c;
});
Instascan.Camera.getCameras().then(function(cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
    alert('No cameras found.');
  }
}).catch(function(e) {
  console.error(e);
  alert(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" id="qrstring" value="" split(); qrData();>
<label id="label">Account ID </label>
<input type="text" name="accId" required="" class="idnum" style="width: 108px;margin-right: 15px;" value="">
<br/>
<label id="label">Customer Name </label>
<br/>
<input type="text" readonly="" name="name" class="idname" required="" value="">

Advertisement

Answer

Try this code

https://plungjan.name/SO/QR/

let scanner = new Instascan.Scanner({
  video: document.getElementById('preview'),
  mirror: false
});

Instascan.Camera.getCameras().then(function(cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
    alert('No cameras found.');
  }
}).catch(function(e) {
  console.error(e);
  alert(e);
});


$(function() {
  const re = /(d+-d+)s+(.*)/;
  scanner.addListener('scan', function(content) {
    console.log(content);
    if (!re.test(content)) {
      console.log("malformed strings")
      return;
    }
    const [_, id, name] = content.match(re);
    $(".idnum").val(id);
    $(".idname").val(name.trim());
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<label id="label">Account ID </label>
<input type="text" name="accId" required="" class="idnum" style="width: 108px;margin-right: 15px;" value="">
<br/>
<label id="label">Customer Name </label>
<br/>
<input type="text" readonly="" name="name" class="idname" required="" value="">

Works on this QR

One line

enter image description here

Two lines

enter image description here

Result

enter image description here

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement