Simple jQuery Barcode Generator Example

jQuery Barcode Generator
This post explaining the simple jQuery barcode generator example. Barcode is an optical, machine readable code which used to represent the data. Using barcode fast-selling items are quickly identified also preventing inventory build-up.

Generally barcode used to save items information like price, code and name etc. Shipping or Inventory manage projects commonly used barcode functionality. So, lets start to learn how to implement simple jquery Barcode generator.

We are using very lightweight jQuery library to generate barcode. Using this we can generate 8 different types of Barcode and output in various format.

Supported Barcode Types:

EAN 8, EAN 13, UPC, standard 2 of 5 (industrial), interleaved 2 of 5, code 11, code 39, code 93, code 128, codabar, MSI, Data Matrix

Output format:

CSS, BMP (not usable in IE), SVG (not usable in IE), Canvas (not usable in IE)

Steps to Create jQuery Barcode Generator:

We are showing live demo to impelment barcode generator using jQuery. File structure are like below:

  • index.html
  • jquery-barcode.js
  • jquery-barcode.min.js

Step 1 : Create an Input Form

First create an jQuery submit HTML form to fill the code and select barcode type and output format.

barcode generator

Step 2 : Include latest jQuery library Files

Add the latest version jQuery library and jQuery Barcode library ‘jquery-barcode.js’ and ‘jquery-barcode.min.js’ in index.html document.

Step 3: Create a Container to Show Barcode

Now create a div container to show generated barcode in index.html document. We are using two container one is ‘barcodeTarget’ to show barcode and another one is ‘canvasTarget’ to show output format in canvas type.

Step 4: Script to implement jQuery Barcode Generator

This step belong to write down an jQuery code to generate barcode using library function. On form submit ‘generateBarcode’ function is called to create barcode. Check the below script code example:

In above script code we are using ‘settings’ variable for the layout of Barcode. You can replace this value as per your need or make it dynamic using form element.

Using this library you can easily create an simple jQuery Barcode Generator. Just follow these steps. View the live demo below also available free source code to download. Thanks Enjoy…


Leave a Comment