Link Search Menu Expand Document

Generate Barcode - JavaScript

Barcode Generator sample in JavaScript demonstrating ‘Generate Barcode’

function generateBarcode()
    // Hide result blocks
    document.getElementById("errorBlock").style.display = "none";
    document.getElementById("resultBlock").style.display = "none";

    // Get API Key
    var apiKey = document.getElementById("apiKey").value.trim();
    if (apiKey == "") {
        alert("API Key should not be empty.");
        return false;
    // Get barcode type
    var barcodeType=document.getElementById("barcodeType").value;
    // Get barcode value
    var inputValue = document.getElementById("inputValue").value.trim();
    if (inputValue == null || inputValue == "") {
        alert("Barcode Value should not be empty.");
        return false;

    //show loader

    // Prepare URL
    var url = "";
    url += "&type=" + barcodeType; // Set barcode type (symbology)
    url += "&value=" + inputValue; // Set barcode value

    // Prepare request
    var httpRequest = new XMLHttpRequest();"POST", url, true);
    httpRequest.setRequestHeader("x-api-key", apiKey); // set API Key
    // Asynchronous response handler
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4) {
            // If OK
            if (httpRequest.status == 200) {
                var result = JSON.parse(httpRequest.responseText);
                if (result.error == false) {
                    document.getElementById("resultBlock").style.display = "block"; // show hidden resultBlock
                    document.getElementById("image").setAttribute("src", result.url); // Set image link to display
                else {
                    document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                    document.getElementById("error").innerHTML = result.message;
            // Else display error
            else {
                document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                document.getElementById("error").innerHTML = "Request failed. Please check you use the correct API key.";

            // Hide loader
    // Send request

    return true;

function showLoader(isDisplay){
    var loader = document.getElementById("loader");

    if(isDisplay){ = "";
<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <title>Barcode Generator Cloud API Example</title>
    <script src="generate_barcode.js" type="text/javascript" encoding="UTF-8"></script>


    <form name="form1">
            <label>Authentication key (API Key). Get your own by registering at <a href=""></a>.</label>
            <br />
            <input type="text" id="apiKey" placeholder="API Key" />
            <label>Barcode Value</label>
            <br />
            <input type="text" id="inputValue" placeholder="Input Value" />
            <label>Barcode type</label>
            <br />
            <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" onclick="return generateBarcode()">Generate</button>
        <span id="loader" style="display: none" >&nbsp;&nbsp; <img src="ajax-loader.gif" /> </span>

    <div id="errorBlock" style="display: none">
        <div id="error"></div>

    <div id="resultBlock" style="display: none">
        <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