CODEWITHSUNDEEP
phpjquerymysqlbarcode
Babatunde Misbah
Babatunde Misbah

Reputation: 27

How to generate multiple barcode image to a printable area in a page PHP

I am working on a small inventory manager web application using PHP,jquery,mysql.... I want to add a barcode functionality to the app

Please I got this code to use on here after several searches; thumb-up to the poster. But I am stuck here:

I wan to generate multiple of the barcode image to a printable area by selecting item/items with productcode/productid from the datatable on the same page and use the add button to add it to the printable area one after the other?

   <style> 
   @font-face { 
  font-family: barcode; 
  src: url(free3of9.ttf); 
   }
    </style>

    <body> ABC 
    <div style='font-family:barcode;font-size:32px;'> 
   123456789    </div> DEF</body>

      </html>

enter image description here

Upvotes: 0

Views: 2712

Answers (1)

Twisty
Twisty

Reputation: 30893

First, to make use of this font, you need to have uploaded it to your web server along with the page you are using. This exmaple will do what you have described with JQuery, yet the Barcode will not be style since jsfiddle does not host the Font.

http://jsfiddle.net/Twisty/72ewdoj4/

HTML

<ul class="form">
    <li>
        <label>Top Text:</label>
        <input type="text" id="top" />
    </li>
    <li>
        <label>Barcode:</label>
        <input type="text" id="bar" />
    </li>
    <li>
        <label>Bottom Text:</label>
        <input type="text" id="bottom" />
    </li>
    <li>
        <button id="add">Add</button>
</ul>
<hr />
<table id="results">
    <tr>
        <td> <span class="label">ABC</span>
 <span class="bar label">123456789</span>
 <span class="label">DEF</span>

        </td>
    </tr>
</table>

CSS

@font-face {
    font-family: barcode;
    src: url(3OF9_NEW.TTF);
}
.label {
    display: block;
}
.bar {
    font-family:barcode;
    font-size:32px;
}
#results {
    width: 100%;
}
#results td {
    padding: 10px 0;
    text-align: center;
}
ul.form {
    margin: 0;
    padding: 0;
}
ul.form li {
    margin: 0;
    list-style: none;
}
ul.form li label {
    display: inline-block;
    width: 120px;
}

JQuery

$(document).ready(function () {
    $("#add").click(function () {
        var newLabel = "<tr><td>"
        newLabel += "<span class='label'>" + $("#top").val() + "</span>";
        newLabel += "<span class='bar label'>" + $("#bar").val() + "</span>";
        newLabel += "<span class='label'>" + $("#bottom").val() + "</span>";
        newLabel += "</td></td>";
        $("#results").append(newLabel);
    });
});

Upvotes: 3

Related Questions