How to Generate Barcode Using jQuery

4 mins0
How to Generate Barcode Using jQuery

Barcodes have become an essential part of modern business operations, facilitating inventory management, product tracking, and point-of-sale transactions.

There are many ways to generate barcodes using JavaScript or jQuery in this post, we will explore how to generate barcodes using jQuery, along with a practical example to demonstrate the process.

Let’s create a new web page for this example. However, you can implement this to any existing page in your project. Here, we will create a simple form to take input value from the user and display the barcode using jQuery and jQuery Barcode library.

Create a new HTML file with one input and button also include jQuery CDN in it like the below example:

<!DOCTYPE html>
<html>
<head>
  <title>Barcode Generator</title>
</head>
<body>
  <input type="text" id="barcode-value" placeholder="Enter a value">
  <button id="generate-btn">Generate Barcode</button>
  <div id="barcode-container"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

Now let’s download and add the jQuery-barcode library to our application. Download the jquery-barcode library from the official website. Extract files into your project directory.

After extracting let’s add the barcode library and code for generating barcode using jQuery. Modify existing and add below code after the jQuery script.

<script src="jquery-barcode/jquery-barcode.js"></script>
<script>
  $(document).ready(function() {
    $('#generate-btn').click(function() {
      var value = $('#barcode-value').val();
      $('#barcode-container').barcode(value, 'code128');
    });
  });
</script>

Here, we have used the $(document).ready() function to ensure that the code executes after the document has finished loading. In ready() method, we have added functionality to listen to click event on the generate button whenever a user clicks on generate barcode button. It will generate a barcode and display it to our div block.

Here, we have taken user input and converted it into a barcode using code128 conversion. You can modify the conversion as per your requirements.

Conclusion

In this post, we have taken a practical example to generate barcodes using jQuery and jquery-barcode library, you can easily incorporate barcode generation functionality into your web applications.

Related Articles