Generate multiple barcode at once - php

Question

I'm currently developing warehouse inventory system. And the only task left is how to generate and print the bin IDs of the rack. The code below generate only 1 barcode. It only generates the last checked item. I need to print multiple barcode at once for printing. Here's the link I used as a reference to generate the barcode.
<?php
require ("../../connect/db.php");
$sql = "select * from location_bin where rack_id = 3";
$rack = mysqli_query($mysqli, $sql);
while($row = mysqli_fetch_array($rack)){
$id = $row['bin_id'];
echo "<input type='checkbox' name='barcodeValue' id='barcodeValue' value='$id'/>$id<br>";
}
?>
Here's the script in generating the barcode.
<script type="text/javascript">
function generate(){
$(document).ready( function() {
$("input[name=barcodeValue]:checked").each(function () {
var id = $(this).attr("value");
function generateBarcode(id){
var value = id;
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
quietZone = true;
}
var settings = {
output:renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
value = {code:value, rect: true};
}
if (renderer == 'canvas'){
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D(){
$('.config .barcode1D').show();
$('.config .barcode2D').hide();
}
function showConfig2D(){
$('.config .barcode1D').hide();
$('.config .barcode2D').show();
}
function clearCanvas(){
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect (0, 0, canvas.width, canvas.height);
ctx.strokeRect (0, 0, canvas.width, canvas.height);
}
$(function(){
$('input[name=btype]').click(function(){
if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
});
$('input[name=renderer]').click(function(){
if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide();
});
generateBarcode(id);
});
});
});
}
</script>
Below is the HTML code.
<div class="title">Type</div>
<input type="radio" name="btype" id="code39" value="code39" checked><label for="code39">code 39</label><br />
<input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br />
<input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
</div>
<div class="config" style="display:none">
<div class="title">Misc</div>
Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
"1" Bars : <input type="text" id="color" value="#000000" size="7"><br />
<div class="barcode1D">
bar width: <input type="text" id="barWidth" value="1" size="3"><br />
bar height: <input type="text" id="barHeight" value="50" size="3"><br />
</div>
<div class="barcode2D">
Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
Quiet Zone Modules: <input type="text" id="quietZoneSize" value="1" size="3"><br />
Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
</div>
<div id="miscCanvas">
x : <input type="text" id="posX" value="10" size="3"><br />
y : <input type="text" id="posY" value="20" size="3"><br />
</div>
</div>
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
<input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br />
<input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br />
</div>
</div>
<div id="submit">
<input type="button" onClick="generate();" value=" Generate the barcode ">
</div>
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>
Output screenshot

Answer 1

Try this, also made a JSFIDDLE
HTML
<input class="thischeckbox" type='checkbox' name='123' id='123' value='123' />123
<br>
<input class="thischeckbox" type='checkbox' name='456' id='456' value='456' />456
<br>
<input class="thischeckbox" type='checkbox' name='789' id='789' value='789' />789
<br>
<div class="title">Type</div>
<input type="radio" name="btype" id="code39" value="code39" checked>
<label for="code39">code 39</label>
<br />
<input type="radio" name="btype" id="code93" value="code93">
<label for="code93">code 93</label>
<br />
<input type="radio" name="btype" id="code128" value="code128">
<label for="code128">code 128</label>
<br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix">
<label for="datamatrix">Data Matrix</label>
<br />
<br />
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked">
<label for="css">CSS</label>
<br />
<input type="radio" id="bmp" name="renderer" value="bmp">
<label for="bmp">BMP (not usable in IE)</label>
<br />
<input type="radio" id="canvas" name="renderer" value="canvas">
<label for="canvas">Canvas (not usable in IE)</label>
<br />
</div>
<div class="config">
<div class="title">Misc</div>
Background :
<input type="text" id="bgColor" value="#FFFFFF" size="7">
<br /> "1" Bars :
<input type="text" id="color" value="#000000" size="7">
<br />
<div class="barcode1D">
bar width:
<input type="text" id="barWidth" value="1" size="3">
<br /> bar height:
<input type="text" id="barHeight" value="50" size="3">
<br />
</div>
<div class="barcode2D">
Module Size:
<input type="text" id="moduleSize" value="5" size="3">
<br /> Quiet Zone Modules:
<input type="text" id="quietZoneSize" value="1" size="3">
<br /> Form:
<input type="checkbox" name="rectangular" id="rectangular">
<label for="rectangular">Rectangular</label>
<br />
</div>
<div id="miscCanvas">
x :
<input type="text" id="posX" value="10" size="3">
<br /> y :
<input type="text" id="posY" value="20" size="3">
<br />
</div>
</div>
<div id="submit">
<input id="generatecode" type="button" onClick="generate();" value=" Generate the barcode ">
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>
js
$('.barcode2D').hide();
$('.barcode1D').show();
$('#miscCanvas').hide();
$('#generatecode').click(function() {
$('input[type=checkbox]:checked').each(function() {
var id = $(this).attr("id");
generateBarcode(id)
});
});
$(document).on('change', 'input[name=btype]', function() {
if ($(this).attr('id') == 'datamatrix') {
showConfig2D();
} else {
showConfig1D();
}
});
$(document).on('change', 'input[name=renderer]', function() {
if ($(this).attr('id') == 'canvas') {
$('.config').show();
$('#miscCanvas').show();
} else {
$('.config').show();
$('#miscCanvas').hide();
}
});
function generateBarcode(id) {
var value = id;
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").val() != '') {
quietZone = true;
}
var settings = {
output: renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')) {
alert("Test")
value = {
code: value,
rect: true
};
}
if (renderer == 'canvas') {
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D() {
$('.config').show();
$('.barcode2D').hide();
$('.barcode1D').show();
}
function showConfig2D() {
$('.config').show();
$('.barcode1D').hide();
$('.barcode2D').show();
}
function clearCanvas() {
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}