Home
SEARCH

 

Form For ActiveX Plus when using a Perl CGI Script


The sample application below was designed to demonstrate how to use the Active X control with a Perl Script.

Bar code message:
Comment:
Comment Alignment:
Bar Height (mils):
Narrow Bar Width (mils):
Bar Code Symbology:
Rotation:
Foreground Color:
Background Color:
Include Quiet Zones
Include Bearer Bars

 

 


  HTML Form Code

Shown below is the HTML source code behind the form shown above. The HTML code below is color coded as follows: Black text is the formatting HTML used for creating the table and separating the elements of the page into an orderly fashion. Red text is JavaScript. The Javascript is run on the client side to determine the Browser and Browser Version that the visitor to the page is using. The Blue text is the most important, these are the HTML Form elements which will be submitted to the server. All Green text are comments to help you understand what is happening and why.

 

<html>
<head>
<title>ActiveX Asp Test</title>

<script language="JavaScript">
<!-- Hide from Older Browsers: if they are using Netscape 1.0, unlikely but not impossible then JavaScript would be treated as plain text and be printed to the screen, by enclosing the javascript in a comment tag, this can be prevented.

function Runme(){
//function to determine Browser type and version: If the Browser supports .png files then create .png images, otherwise create .gif images. If their Browser does not run this script because it is too old or javascript has been disabled, we shall set the default value to .gif. (The Advantage of .png files is that they are much smaller in size (in terms of bytes) which means quicker loading times and less space used on the server.)

var bName = navigator.appName;
var bVer = parseFloat(navigator.appVersion);

document.forms['BarCodeForm'].elements['Browser'].value = bName;
document.forms['BarCodeForm'].elements['Version'].value = bVer;

}

Done Hiding -->
</script>

</head>

<body onLoad="Runme()"><!-- Here we tell the Runme code to run when the page is loaded -->

<form METHOD="POST" NAME="BarCodeForm" action="scripts/barcode.pl">
<!-- Here we tell the Browser the name of the form, the method of submitting the data to the server, and the name (and location) of the script to run when the form is submitted. There are 2 methods of submitting data to the server GET and POST. When you use the GET method the form data is appended to the URL in the query string (e.g. http://www.taltech.com/barcode.asp?field1=value&field2=value) which can be read by a server side script using the Request.QueryString collection. In Contrast, the POST method does not append data to the URL, which means that the number and size of field values are nearly unlimited, and the Data is read by the Server script using the Request.Form collection. -->

<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="EFEFE7">
<tr>
<td width="45%" height="359">
<table border="0" width="100%" bgcolor="EFEFE7">
<tr>
<td width="50%" align="right" bgcolor="EFEFE7"><small>Bar code
message:</small></td>
<td width="50%" bgcolor="EFEFE7"> <!-- This is the text to be converted to a barcode -->
<input type="text" value="12345678901" size="12" name="txtMessage" tabindex="1">
<input type="hidden" name="Imagetype">
<!-- Here we set the default value of the Image type -->
</td>
</tr>
<tr>
<td width="50%" align="right"><small>Comment:</small></td>
<td width="50%">
<input type="text" size="12" name="txtComment" tabindex="2">
</td>
</tr>
<tr>
<td width="50%" align="right" bgcolor="EFEFE7"><small>Comment
Alignment:</small></td>
<td width="50%" bgcolor="EFEFE7">
<select size="1" name="commentalignment" tabindex="3">
<option selected value="0"> Left Align </option>
<option value="1"> Center Align </option>
<option value="2"> Right Align </option>
</select>

</td>
</tr>
<tr>
<td width="50%" align="right"><small>Bar Height (mils):</small></td>
<td width="50%">
<input type="text" value="1000" size="12" name="barheight" tabindex="4">
</td>
</tr>
<tr>
<td width="50%" align="right" bgcolor="EFEFE7"><small>Narrow
Bar Width (mils):</small></td>
<td width="50%" bgcolor="EFEFE7">
<input type="text" value="13" size="12" name="narrowbarwidth" tabindex="5">
</td>
</tr>
<tr>
<td width="50%" align="right"><small>Bar Code Symbology:</small></td><!-- Choose the type of barcode to create -->
<td width="50%">
<select size="1" name="symbology" tabindex="6">
<option selected value="0"> Code 39 </option>
<option value="1"> Full ASCII 39 </option>
<option value="2"> Code 39 HIBC </option>
<option value="3"> Codabar </option>
<option value="4"> Code 93 </option>
<option value="5"> Code 128 </option>
<option value="6"> UCC/EAN 128 </option>
<option value="7"> Interleaved 2 of 5 </option>
<option value="8"> PostNET </option>
<option value="9"> UPC - A </option>
<option value="10"> UPC - E </option>
<option value="11"> EAN - 8 </option>
<option value="12"> EAN - 13 </option>
<option value="13"> Bookland </option>
<option value="14"> MSI/Plessey </option>
<option value="15"> PDF417 </option>
<option value="16"> Aztec Code </option>
<option value="17"> Data Matrix </option>
<option value="18"> MaxiCode </option>
</select>

</td>
</tr>
<tr>
<td width="50%" align="right" bgcolor="EFEFE7"><small>Rotation:</small></td>
<td width="50%" bgcolor="EFEFE7">
<select size="1" name="rotation" tabindex="7">
<option selected value="0"> 0 degrees </option>
<option value="1"> 90 degrees </option>
<option value="2"> 180 degrees </option>
<option value="3"> 270 degrees </option>
</select>

</td>
</tr>
<tr>
<td width="50%" align="right"><small>Foreground Color:</small></td>
<td width="50%">
<select size="1" name="forecolor" tabindex="8">
<option selected value="0"> Black </option>
<option value="255"> Red </option>
<option value="65280"> Green </option>
<option value="16711680"> Blue </option>
</select>

</td>
</tr>
<tr>
<td width="50%" align="right" bgcolor="EFEFE7"><small>Background
Color:</small></td>
<td width="50%" bgcolor="EFEFE7">
<select size="1" name="backcolor" tabindex="9">
<option selected value="16777215"> White </option>
<option value="255"> Red </option>
<option value="65280"> Green </option>
<option value="16711680"> Blue </option>
</select>

</td>
</tr>
<tr>
<td width="50%" align="right" valign="top">
<div align="left">
<input type="checkbox" value="ON" CHECKED name="quietzones" tabindex="10">
<small>Include Quiet Zones</small></div>
</td>
<td width="50%" valign="top">
<input type="checkbox" value="ON" name="bearerbars" tabindex="11">
<small>Include Bearer Bars</small></td>
</tr>
</table>
</td>
<td width="55%" height="359">
<table border="0" width="100%" height="100%">
<tr bgcolor="EFEFE7">
<td>
<div align="center">
<center>
<p>
</center>
</div>
<div align="center">
<center>
<p>
<input type="hidden" name="Browser">
&nbsp;<br>
<input type="hidden" name="scrHeight">
<input type="hidden" name="scrWidth">
<input type="hidden" name="Version">
<input type="submit" name="Submit" value="Submit" tabindex="12">

<p>&nbsp;</p>
</center>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form></body></html>


  Discussion

Our form gives the visitor the opportunity to change only the most common properties of the TAL Bar Code ActiveX control.

Related Links

Introduction to Active Server Pages
Using The TAL Bar Code ActiveX Plus with PERL CGI Scripts