Simple jQuery Barcode Generator HTML Code

jQuery Barcode Generator
This post explaining the simple jQuery barcode generator HTML example. Barcode is an optical, machine-readable code which used to represent the data. Using barcode fast-selling items is 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, let’s start to learn how to implement a simple HTML Barcode generator.

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

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 a jQuery Barcode Generator:

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

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

Step 1: Create an Input Barcode Generator HTML Form

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

index.html

barcode generator

Step 2: Include the latest jQuery library Files

Add the latest version jQuery library, 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 belongs to write down a jQuery code to generate a barcode using library function. On form submit ‘generateBarcode’ function is called to create a barcode. Check the below script code example:

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

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

DEMO | Download

Download Codecanyon Script

Recommended Posts For You

About Harish

I am professional web developer and blogger. Use this blog to share own api and other web development experience with you. I do accept paid work. Write to me at - [email protected]

View all posts by Harish

1 thought on “Simple jQuery Barcode Generator HTML Code”

  1. This is great.
    I am searching information how I can incorporate this into my plan of developing an Inventory App using the Lianja App Builder.

Leave a Comment

Your email address will not be published. Required fields are marked *