Link Search Menu Expand Document

Generate Barcode (JQuery) - Async API - JavaScript

Barcode Generator sample in JavaScript demonstrating ‘Generate Barcode (JQuery) - Async API’

var apiKey = "";

$(document).ready(function () {

$(document).on("click", "#submit", function () {
    apiKey = $("#apiKey").val().trim(); //Get your API key by registering at

    var url = "";

    var oData = {
        name: 'barcode.png',
        type: $("#barcodeType").val(), // Set barcode type (symbology)
        value: $("#inputValue").val(), // Set barcode value
        async: true

    // Show loader

        url: url,
        data: oData,
        type: "GET",
        headers: {
            "x-api-key": apiKey
        .done(function (data, textStatus, jqXHR) {

            if (data.error) {
            else {
                checkIfJobIsCompleted(data.jobId, data.url);
        .fail(function (jqXHR, textStatus, errorThrown) {
            $("#error").html("Request failed. Please check you use the correct API key.");

function checkIfJobIsCompleted(jobId, resultFileUrl) {
        url: '' + jobId,
        type: 'POST',
        headers: { 'x-api-key': apiKey }, // passing our api key
        success: function (jobResult) {

            $("#status").html(jobResult.status + ' &nbsp;&nbsp;&nbsp; <img src="ajax-loader.gif" />');

            if (jobResult.status == "working") {
                // Check again after 3 seconds
                    checkIfJobIsCompleted(jobId, resultFileUrl);
                }, 3000);
            else if (jobResult.status == "success") {
                $("#image").attr("src", resultFileUrl);

        error: function(){
            $("#error").html("Request failed. Please check you use the correct API key.");
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Barcode JQuery sample</title>
    <script src=""></script>
    <script src="generate_barcode.js" type="text/javascript" encoding="UTF-8"></script>

            <label>Authentication key (API Key). Get your own by registering at <a href=""></a>.</label>
            <input type="text" id="apiKey" placeholder="API Key" />
            <input type="text" id="inputValue" placeholder="Input Value" />
            <label>Barcode type</label>
            <select id="barcodeType">
                <option value="Aztec"> Aztec  </option>
                <option value="Bookland"> Bookland  </option>
                <option value="Codabar"> Codabar  </option>
                <option value="Code128"> Code 128  </option>
                <option value="Code39" selected="selected"> Code 39  </option>
                <option value="Code93"> Code 93  </option>
                <option value="DataMatrix"> DataMatrix  </option>
                <option value="DeutschePostIdentcode"> Deutsche Post Identcode  </option>
                <option value="DeutschePostLeitcode"> Deutsche Post Leitcode  </option>
                <option value="DutchKix"> Dutch KIX  </option>
                <option value="EAN128"> EAN-128  </option>
                <option value="EAN13"> EAN-13  </option>
                <option value="EAN14"> EAN-14  </option>
                <option value="EAN2"> EAN-2  </option>
                <option value="EAN5"> EAN-5  </option>
                <option value="EAN8"> EAN-8  </option>
                <option value="GS1_128"> GS1-128  </option>
                <option value="GS1_DataBar_Expanded"> GS1 DataBar Expanded  </option>
                <option value="GS1_DataBar_Expanded_Stacked"> GS1 DataBar Expanded Stacked  </option>
                <option value="GS1_DataBar_Limited"> GS1 DataBar Limited  </option>
                <option value="GS1_DataBar_Omnidirectional"> GS1 DataBar Omnidirectional  </option>
                <option value="GS1_DataBar_Stacked"> GS1 DataBar Stacked  </option>
                <option value="GS1_DataBar_Stacked_Omnidirectional"> GS1 DataBar Stacked Omnidirectional  </option>
                <option value="GS1_DataBar_Truncated"> GS1 DataBar Truncated  </option>
                <option value="GS1_DataMatrix"> GS1-DataMatrix  </option>
                <option value="GTIN12"> GTIN-12  </option>
                <option value="GTIN13"> GTIN-13  </option>
                <option value="GTIN14"> GTIN-14  </option>
                <option value="GTIN8"> GTIN-8  </option>
                <option value="I2of5"> Interleaved 2 of 5  </option>
                <option value="IntelligentMail"> Intelligent Mail  </option>
                <option value="ISBN"> ISBN  </option>
                <option value="ITF14"> ITF-14  </option>
                <option value="JAN13"> JAN-13  </option>
                <option value="MacroPDF417"> Macro PDF417  </option>
                <option value="MaxiCode"> MaxiCode  </option>
                <option value="MicroPDF417"> Micro PDF417  </option>
                <option value="MSI"> MSI  </option>
                <option value="Numly"> Numly  </option>
                <option value="OpticalProduct"> Optical Product  </option>
                <option value="PDF417"> PDF417  </option>
                <option value="PDF417Truncated"> PDF417 Truncated  </option>
                <option value="Planet"> Planet  </option>
                <option value="Plessey"> Plessey  </option>
                <option value="Postnet"> Postnet  </option>
                <option value="PZN"> PZN  </option>
                <option value="QRCode"> QR Code  </option>
                <option value="RoyalMail"> Royal Mail  </option>
                <option value="SingaporePostalCode"> Singapore Postal Code  </option>
                <option value="SwissPostParcel"> Swiss Post Parcel  </option>
                <option value="Telepen"> Telepen  </option>
                <option value="UPCA"> UPC-A  </option>
                <option value="UPCE"> UPC-E  </option>
                <option value="USPSSackLabel"> USPS Sack Label  </option>
                <option value="USPSTrayLabel"> USPS Tray Label  </option>
        <button type="button" id="submit">Generate</button>
        <span id="loader" style="display: none" >&nbsp;&nbsp; <img src="ajax-loader.gif" /> </span>

    <div id="errorBlock">
        <div id="error"></div>

    <div id="resultBlock">
        <img src="" id="image">

</html> Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.

Get your API key here!

Download Source Code (.zip)

return to the previous page explore Barcode Generator endpoint