Barcode jQuery example

In this article, we will learn how to create Barcodes with the help of jQuery. First of all, we know the basics of jQuery and Barcode. After that, we learn how to create Barcodes with the help of various examples in jQuery.

What do you mean by jQuery?

JQuery was introduced to simplify HTML DOM tree traversal and manipulation and event handling, CSS animation, and Ajax. It is free, open-source software.

What do you mean by Barcode?

A barcode is a method of representing data in a machine-readable form. It was invented by Norman Joseph Woodland and Bernard Silver and patented in the US in 1951. It consisting of bars and spaces of varying width that can be read with an optical barcode scanner. They are mostly used in retail stores, warehouses to track inventory, invoices to assist in accounting, and many more.

Example 1:

<html>
<head>
<title> Example barcode using jQuery </title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet">
<link href = "https://lindell.me/JsBarcode/generator/rangeslider.css" rel="stylesheet"> 
<style>
body {
  background: #333;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
}
#main {
  background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(transparent)), -webkit-gradient(linear, left top, right top, from(skyblue), to(transparent)), -webkit-gradient(linear, right top, left top, from(coral), to(transparent));
  background: -webkit-linear-gradient(lightgrey, transparent), -webkit-linear-gradient(left, skyblue, transparent), -webkit-linear-gradient(right, coral, transparent);
  background: -o-linear-gradient(lightgrey, transparent), -o-linear-gradient(left, skyblue, transparent), -o-linear-gradient(right, coral, transparent);
  background: linear-gradient(lightgrey, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
  background-blend-mode: screen;
  margin: 10 auto;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 25px;
  margin-bottom: 50px;
  min-width: 768px;
  padding-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
}
.container {
  width: 750px;
  text-align: left;
}
@media (max-width: 800px) {
  #main {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0px;
    width: 100%;
    min-width: 0px;
  }
  .container {
    width: 100%;
  }
 .github-banner {
    display: none;
  }
}
#userInput {
  height: 35px;
}
#barcode {
  vertical-align: middle;
}
#title {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 90%;
}
#title a:link {
  text-decoration: none;
  color: #000;
}
#title a:visited {
  text-decoration: none;
  color: #000;
}
#title a:hover {
  text-decoration: underline;
  color: #000;
}
#title a:active {
  text-decoration: underline;
  color: #000;
}
#invalid {
  display: none;
  color: #DE0000;
  margin-top: 10px;
  font-size: 14pt;
  vertical-align: middle;
}
h1 {
  margin-bottom: -10px;
  color: #03a9f4;
  line-height: 1.5;
}
p {
  margin-bottom: -10px;
  color: #03a9f4;
  font-weight: bold;
}
#barcodeType {
  height: 35px;
}
.barcode-container {
  height: 200px;
  line-height: 200px;
  text-align: center;
  vertical-align: middle;
  margin-left: 25px;
  margin-right: 25px;
}

.description-text {
  height: 42px;
}

.description-text p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.value-text {
  height: 42px;
  text-align: right;
}

.value-text p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.center-text {
  text-align: center;
}

.search-bar {
  margin-bottom: 20px;
}

.slider-container {
  margin-top: 17px;
}

.input-container {
  margin-top: 5px;
}

.barcode-select {
  border-color: #ccc;
}
</style>
</head>
<body>
<div id="main">
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <div id="title">
              <h1> Example: <br></h1> <h2> <b> Barcode Generator </b> </h2>
            </div>
          </div>
        </div>
      </div>
      <div class="barcode-container">
        <svg id="barcode"> </svg>
        <span id="invalid"> Not valid data for this barcode type! </span>
      </div>
      <div class="container">
        <div class="row search-bar">
          <div class="col-md-10 col-md-offset-1">
            <div class="input-group margin-bottom-sm">
              <span class="input-group-addon"> <i class="fa fa-barcode fa-fw"> </i> </span>
              <input class="form-control" id="userInput" type="text" value="1234" placeholder="Barcode" autofocus>
              <span class="input-group-btn">
                <select class="btn barcode-select" id="barcodeType" title="CODE128">
                  <option value="CODE128"> CODE128 auto </option>
                  <option value="CODE128A"> CODE128 A </option>
                  <option value="CODE128B"> CODE128 B </option>
                  <option value="CODE128C"> CODE128 C </option>
                  <option value="EAN13"> EAN13 </option>
                  <option value="EAN8"> EAN8 </option>
                  <option value="UPC"> UPC </option>
                  <option value="CODE39"> CODE39 </option>
                  <option value="ITF14"> ITF14 </option>
                  <option value="ITF"> ITF </option>
                  <option value="MSI"> MSI </option>
                  <option value="MSI10"> MSI10 </option>
                  <option value="MSI11"> MSI11 </option>
                  <option value="MSI1010"> MSI1010 </option>
                  <option value="MSI1110"> MSI1110 </option>
                  <option value="pharmacode"> Pharmacode </option>
                </select>
              </span>
            </div>
          </div>
        </div>
        <!-- Bar width -->
        <div class="row">
          <div class="col-md-2 col-xs-12 col-md-offset-1 description-text"> <p> Bar Width </p> </div>
          <div class="col-md-7 col-xs-11 slider-container"> <input id="bar-width" type="range" min="1" max="4" step="1" value="2"/> </div>
          <div class="col-md-1 col-xs-1 value-text"> <p> <span id="bar-width-display"> </span> </p> </div>
        </div>
        <!-- Height -->
        <div class="row">
          <div class="col-md-2 col-xs-12 col-md-offset-1 description-text"> <p>Height </p> </div>
          <div class="col-md-7 col-xs-11 slider-container"><input id="bar-height" type="range" min="10" max="150" step="5" value="100"/> </div>
          <div class="col-md-1 col-xs-1 value-text"> <p> <span id="bar-height-display"> </span> </p> </div>
        </div>
        <!-- Margin -->
        <div class="row">
          <div class="col-md-2 col-xs-12 col-md-offset-1 description-text"> <p> Margin </p> </div>
          <div class="col-md-7 col-xs-11 slider-container"> <input id="bar-margin" type="range" min="0" max="25" step="1" value="10"/> </div>
          <div class="col-md-1 col-xs-1 value-text"> <p> <span id="bar-margin-display"> </span> </p> </div>
        </div>
        <!-- Background (color) -->
        <div class="row">
          <div class="col-md-2 col-xs-12 col-md-offset-1 description-text"> <p> Background </p> </div>
          <div class="col-md-7 col-xs-11 input-container"> <input id="background-color" class="form-control color" value="#FFFFFF"/> </div>
          <div class="col-md-1 col-xs-1 value-text"> </div>
        </div>
        <!-- Line color -->
        <div class="row">
          <div class="col-md-2 col-xs-12 col-md-offset-1 description-text"> <p>Line Color </p> </div>
          <div class="col-md-7 col-xs-11 input-container"> <input id="line-color" class="form-control color" value="#000000"/> </div>
          <div class="col-md-1 col-xs-1 value-text"> </div>
        </div>
        <!-- Show text -->
        <div class="row checkbox-options">
          <div class="col-md-2 col-md-offset-1 col-xs-12 col-xs-offset-0 description-text"> <p> Show text </p> </div>
          <div class="col-md-7 col-xs-12 center-text">
            <div class="btn-group btn-group-md" role="toolbar">
              <button type="button" class="btn btn-default btn-primary display-text" value="true"> Show </button>
              <button type="button" class="btn btn-default display-text" value="false"> Hide </button>
            </div>
          </div>
          <div class="col-md-1 col-xs-0"> </div>
        </div>
        <div id="font-options">
          <!-- Text align -->
          <div class="row checkbox-options">
            <div class="col-md-2 col-md-offset-1 col-xs-12 col-xs-offset-0 description-text"> <p> Text Align </p> </div>
            <div class="col-md-7 center-text">
              <div class="btn-group btn-group-md" role="toolbar">
                <button type="button" class="btn btn-default text-align" value="left"> Left </button>
                <button type="button" class="btn btn-default btn-primary text-align" value="center"> Center </button>
                <button type="button" class="btn btn-default text-align" value="right"> Right </button>
              </div>
            </div>
            <div class="col-md-1"> </div>
          </div>
          <!-- Font -->
          <div class="row">
            <div class="col-md-2 col-md-offset-1 col-xs-12 col-xs-offset-0 description-text"> <p> Font </p> </div>
            <div class="col-md-7 center-text">
              <select class="form-control" id="font" style="font-family: monospace">
                <option value="monospace" style="font-family: monospace" selected="selected"> Monospace </option>
                <option value="sans-serif" style="font-family: sans-serif"> Sans-serif </option>
                <option value="serif" style="font-family: serif"> Serif </option>
                <option value="fantasy" style="font-family: fantasy"> Fantasy </option>
                <option value="cursive" style="font-family: cursive"> Cursive </option>
              </select>
            </div>
            <div class="col-md-1"> </div>
          </div>
          <!-- Font options -->
          <div class="row checkbox-options">
            <div class="col-md-2 col-md-offset-1 col-xs-12 col-xs-offset-0 description-text"> <p> Font Options </p> </div>
            <div class="col-md-7 center-text">
              <div class="btn-group btn-group-md" role="toolbar">
                <button type="button" class="btn btn-default font-option" value="bold" style="font-weight: bold"> Bold </button>
                <button type="button" class="btn btn-default font-option" value="italic" style="font-style: italic"> Italic </button>
              </div>
            </div>
            <div class="col-md-1"> </div>
          </div>
          <!-- Font size -->
          <div class="row">
            <div class="col-md-2 col-md-offset-1 col-xs-12 col-xs-offset-0 description-text"> <p> Font Size </p> </div>
            <div class="col-md-7 col-xs-11 slider-container"> <input id="bar-fontSize" type="range" min="8" max="36" step="1" value="20"/> </div>
            <div class="col-md-1 col-xs-1 value-text"> <p> <span id="bar-fontSize-display"> </span> </p> </div>
          </div>
          <!-- Text margin -->
          <div class="row">
            <div class="col-md-2 col-md-offset-1 col-xs-12 col-xs-offset-0 description-text"> <p> Text Margin </p> </div>
            <div class="col-md-7 col-xs-11 slider-container"> <input id="bar-text-margin" type="range" min="-15" max="40" step="1" value="0"/> </div>
            <div class="col-md-1 col-xs-1 col-xs-11 value-text"> <p> <span id="bar-text-margin-display"> </span> </p> </div>
          </div>
        </div>
      </div>
    </div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"> </script>
<script src="https://lindell.me/JsBarcode/generator/javascripts/rangeslider.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
<script>
var defaultValues = {
    CODE128 : "1234",
    CODE128A : "EXAMPLE",
    CODE128B : "Example text",
    CODE128C : "12345678",
    EAN13 : "1234567890128",
    EAN8 : "12345670",
    UPC : "123456789999",
    CODE39 : "EXAMPLE TEXT",
    ITF14 : "10012345000017",
    ITF : "123456",
    MSI : "123456",
    MSI10 : "123456",
    MSI11 : "123456",
    MSI1010 : "123456",
    MSI1110 : "123456",
    pharmacode : "1234"
};
$(document).ready(function() {
    $("#userInput").on('input',newBarcode);
    $("#barcodeType").change(function() {
        $("#userInput").val( defaultValues[$(this).val()] );
        newBarcode();
    } );
    $(".text-align").click(function() {
      $(".text-align").removeClass("btn-primary");
      $(this).addClass("btn-primary");
     newBarcode();
    } );
    $(".font-option").click(function() {
      if($(this).hasClass("btn-primary")) {
        $(this).removeClass("btn-primary");
      }
      else {
        $(this).addClass("btn-primary");
      }
      newBarcode();
    } );
    $(".display-text").click(function() {
      $(".display-text").removeClass("btn-primary");
      $(this).addClass("btn-primary");
      if($(this).val() == "true") {
        $("#font-options").slideDown("fast");
      }
      else {
        $("#font-options").slideUp("fast");
      }
      newBarcode();
     } );
   $("#font").change(function(){
      $(this).css( {"font-family": $(this).val()} );
      newBarcode();
    } );
    $('input[type="range"]').rangeslider( {
        polyfill: false,
        rangeClass: 'rangeslider',
        fillClass: 'rangeslider__fill',
        handleClass: 'rangeslider__handle',
        onSlide: newBarcode,
        onSlideEnd: newBarcode
    } );
    $('.color').colorPicker( {
renderCallback: newBarcode });

    newBarcode();
});
var newBarcode = function() {
    //Convert to boolean
    $("#barcode").JsBarcode(
        $("#userInput").val(),
        {
          "format": $("#barcodeType").val(),
          "background": $("#background-color").val(),
          "lineColor": $("#line-color").val(),
          "fontSize": parseInt($("#bar-fontSize").val()),
          "height": parseInt($("#bar-height").val()),
          "width": $("#bar-width").val(),
          "margin": parseInt($("#bar-margin").val()),
          "textMargin": parseInt($("#bar-text-margin").val()),
          "displayValue": $(".display-text.btn-primary").val() == "true",
          "font": $("#font").val(),
          "fontOptions": $(".font-option.btn-primary").map(function() { return this.value; }).get().join(" "),
          "textAlign": $(".text-align.btn-primary").val(),
          "valid":
            function(valid) {
              if(valid) {
                $("#barcode").show();
                $("#invalid").hide();
              }
              else {
                $("#barcode").hide();
                $("#invalid").show();
              }
            }
        });
    $("#bar-width-display").text($("#bar-width").val());
    $("#bar-height-display").text($("#bar-height").val());
    $("#bar-fontSize-display").text($("#bar-fontSize").val());
    $("#bar-margin-display").text($("#bar-margin").val());
    $("#bar-text-margin-display").text($("#bar-text-margin").val());
};
</script>
</body>
</html>

Explanation:

In this example, we can create barcodes with the help of jQuery.

Following is the output of the example:

Example 2:

<html>
<head>
<title> Example barcode using jquery </title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
<style>
body {
  background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(transparent)), -webkit-gradient(linear, left top, right top, from(skyblue), to(transparent)), -webkit-gradient(linear, right top, left top, from(coral), to(transparent));
  background: -webkit-linear-gradient(lightgrey, transparent), -webkit-linear-gradient(left, skyblue, transparent), -webkit-linear-gradient(right, coral, transparent);
  background: -o-linear-gradient(lightgrey, transparent), -o-linear-gradient(left, skyblue, transparent), -o-linear-gradient(right, coral, transparent);
  background: linear-gradient(lightgrey, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
  background-blend-mode: screen;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 25px;
  margin-left: 25px;
  margin-bottom: 50px;
  min-width: 768px;
  padding-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
}
* {
    color:#7F7F7F;
    font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:normal;
}
#config {
    margin: 10px 0 10px 0px;
}
p { 
  color: #03a9f4;
  font-weight: bold;
}
.config {
    float: left;
    width: 200px;
    height: 250px;
    border: 1px solid #000;
    margin-left: 10px;
}
.config .title {
    font-weight: bold;
    text-align: center;
}
.config .barcode2D, #miscCanvas {
    display: none;
}
#submit {
    clear: both;
}
input[type="button"] {
    margin: 10px 0 10px 0px;
}

#barcodeTarget, #canvasTarget {
    margin-top: 20px;
}
</style>
</head>
<body>
<div id="generator"> <p> Please fill in the code : </p>
    <input type="text" id="barcodeValue" value="12345670">
    <div id="config">
        <div class="config">
            <div class="title">Type</div>
            <input type="radio" name="btype" id="ean8" value="ean8" checked="checked">
            <label for="ean8">EAN 8</label>
            <br />
            <input type="radio" name="btype" id="ean13" value="ean13">
            <label for="ean13">EAN 13</label>
            <br />
            <input type="radio" name="btype" id="upc" value="upc">
            <label for="upc">UPC</label>
            <br />
            <input type="radio" name="btype" id="std25" value="std25">
            <label for="std25">standard 2 of 5 (industrial)</label>
            <br />
            <input type="radio" name="btype" id="int25" value="int25">
            <label for="int25">interleaved 2 of 5</label>
            <br />
            <input type="radio" name="btype" id="code11" value="code11">
            <label for="code11">code 11</label>
            <br />
            <input type="radio" name="btype" id="code39" value="code39">
            <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="codabar" value="codabar">
            <label for="codabar">codabar</label>
            <br />
            <input type="radio" name="btype" id="msi" value="msi">
            <label for="msi">MSI</label>
            <br />
            <input type="radio" name="btype" id="datamatrix" value="datamatrix">
            <label for="datamatrix">Data Matrix</label>
            <br />
            <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 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="svg" name="renderer" value="svg">
            <label for="svg">SVG (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" value="�����Generate the barcode�����">
    </div>
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="150"></canvas>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
<script src="https://cdn.jsdelivr.net/gh/jbdemonte/barcode/jquery/jquery-barcode.js"> </script> 
<script>
$(document).ready(function () {
    $("input[type='button']").click(function () {
        generateBarcode();
    });
   function generateBarcode() {
        var value = $("#barcodeValue").val();
        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();
    });
});
</script>
</body>
</html>

Explanation:

In this example, we can create Barcodes with the help of jQuery.

Following is the output of the example: