Salve a tutti , e da un pezzo che vi seguo da esterno e vi ammiro molto , vorrei porvi un dilemma inerente a questa pagina che vi allego ,che genera un codice a barre , il quale funziona abbastanza bene , fatta eccezione per l'auto-invio del valore inserito, mi spiego : ho la necessita di generate un codice a barre diverso ogni qualvolta richiamo questa pagina ; per far ciò utilizzo 2 parti che rispettivamente:
- uno genera il codice a barre ricevendo in input un valore numerico di 11 cifre
- un'altro genera in maniera random un codice di 11 cifre (tramite php)
Se si fa partire la pagina ci si rende conto come tutto funzioni abbastanza bene , ovvero , si generi nella input text il codice numerico random e una volta confermato tramite invio , come , cambi il rispettivo codice a barre corrispondente .
Adesso noto , come anche , inserendo una cifra in più o anche solo premendo il tasto TAB da tastiera il tutto funziona perfettamente , per cui vorrei sapere se qualcuno di voi ha un consiglio su come :
- auto confermare il codice generato nell'input di tipo text
- inserire un numero a caso senza che l'utente se ne accorca , e quindi con conseguente cambio dell'immagine del codice a barre.
- oppure , come premere il tasto tab automaticamente
- oppure come generare un codice a barre diverso ad ogni chiamata della pagina
(devo implementare una sorta di ricevuta e devo semplicemente avere un codice diverso ad ogni generazione della pagina , togliere il campo di inserimento e nascondere tutto all'utente non è difficile)
codice:
<html>
<head>
<title></title>
<link rel="stylesheet" href="./custom.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
</head>
<body >
<script>
$(document).ready(function() {
$('#result').hide(); // set initially hidden
$('#red-strike').hide(); // set initially hidden
$('input[name=barcodenum]').keyup(function() {
var bcnum = $('input[name=barcodenum]').val();
var intcheck = /^\d+$/; // regex only 0-9
if ( (intcheck.test(bcnum)) && (bcnum.length == 11) ) {
var elements = ['l1','l2','l3','l4','l5','l6','r1','r2','r3','r4','r5'];
jQuery.each(elements, function(i, val) {
var code_update = bcnum.substring(i,i+1);
var bcx = eval("bc".concat(code_update));
$("#" + this).html(bcx);
});
var bcdigits = bcnum.split('');
var checksum_s1 = 0;
var checksum_s2 = 0;
jQuery.each(bcdigits, function(i,val){
if(i%2 == 0) {
checksum_s1 += parseInt(val);
} else {
checksum_s2 += parseInt(val);
}
});
var checksum_s3 = checksum_s1*3 + checksum_s2;
var s3_string = checksum_s3.toString();
var s3_last = s3_string.substring(s3_string.length - 1);
if (s3_last == "0") {
$("#r6").html(bc0);
var diff = 0;
} else {
var diff = 10 - parseInt(s3_last);
var diff_bc = eval("bc".concat(diff));
$("#r6").html(diff_bc);
};
$('#l-digits').text(bcnum.slice(1,6));
$('#r-digits').text(bcnum.slice(6,11));
$('#red-strike').hide(); // set hidden
$("#entered_bc").text(bcnum);
$("#calc_check").text(diff);
$("#all_digits").text(bcnum + diff);
$('#result').show();
} else {
$('#l-digits').text("Enter digits");
$('#r-digits').text("");
$('#red-strike').show();
$('#result').hide();
}
});
var bc0 = "<div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc1 = "<div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc2 = "<div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc3 = "<div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc4 = "<div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc5 = "<div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc6 = "<div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc7 = "<div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc8 = "<div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\">\
<\/div>";
var bc9 = "<div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m o\"><\/div><div \
class=\"m e\"><\/div><div \
class=\"m e\">\
<\/div>";
});
</script>
<style>/* css barcode */
/* by rexfeng 2012 */
html, body {height: 400px;}
body {
background-color: #fff;
padding: 1px;
color: #000;
font-family: Helvetica, Arial;
}
.holder {
width: 280px;
position: relative;
margin: 30px auto;
}
#query {
padding: 15px;
width: 280px;
background: #eee;
border-radius: 5px;
border: 1px solid #ccc;
color: #888;
font-size: 13px;
margin-top: 30px;
}
#query a {
text-decoration: none;
color: blue;
}
#barcodenum {
}
.instructions {
color: #333;
}
#upc-a {
background: #eee;
border-radius: 5px;
border: 1px solid #ccc;
width: 285px;
padding: 13px;
}
#upc-wrap {
width: 285px; /* 95 *3 */
height: 186px; /* 62 *3 */
}
.m { /* module 1px *3 width */
width: 3px;
height: 179px; /* 186 / 244 * 235 = 179px */
display: inline-block;
vertical-align: top;
}
.long {
height: 186px;
}
.o {
background-color: #fff;
}
.e {
background-color: #000;
}
.l {
display: inline-block;
}
.r {
display: inline-block;
}
.r .o.m {
background-color: #000;
}
.r .e.m {
background-color: #fff;
}
#l1, #l2, #l3, #l4, #l5, #l6 {
display: inline-block;
}
#r1, #r2, #r3, #r4, #r5, #r6 {
display: inline-block;
}
.digits {
font-family: monospace, Courier;
font-size: 2em;
display: inline;
position: relative;
top: -10px;
letter-spacing: 3px;
}
#l-digits {
margin-left: 20px;
}
#r-digits {
margin-left: 24px;
}
#red-strike {
width: 301px;
height: 3px;
background-color: red;
position: absolute;
margin: 100px 30px 0 22px;
}
</style>
<div class="holder">
<div id="red-strike"></div>
<div id="upc-a">
<div id="upc-wrap">
<!-- begin UPC -->
<div
class="m e long"></div><div
class="m o long"></div><div
class="m e long"></div><!--
Quiet Zone
--><div class="l"><!--
begin L --><div
id="l1"><div
class="m o"></div><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"><!--
--></div></div><div
id="l2"><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="l3"><div
class="m o"></div><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"><!--
--></div></div><div
id="l4"><div
class="m o"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="l5"><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="l6"><div
class="m o"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"><!--
end L -->
</div></div></div><!--
begin M
--><div
class="m o long"></div><div
class="m e long"></div><div
class="m o long"></div><div
class="m e long"></div><div
class="m o long"></div><!--
end M
--><div class="r"><!--
begin R --><div
id="r1"><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="r2"><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m o"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="r3"><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="r4"><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"><!--
--></div></div><div
id="r5"><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"><!--
--></div></div><div
id="r6"><div
class="m o"></div><div
class="m e"></div><div
class="m o"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"></div><div
class="m e"><!--
end R
--></div></div></div><!--
Quiet Zone
--><div
class="m e long"></div><div
class="m o long"></div><div
class="m e long"></div>
<!-- end UPC -->
</div><!-- end upc-wrap -->
<div id="l-digits" class="digits">20626</div>
<div id="r-digits" class="digits">72838</div>
</div><!-- end upc-a -->
<div id="query">
<?php
function random_string($length=32, $args = array()){
$allow = array(); //contiene i gruppi (valori da passare) permessi
$permit = array(); //contiene i gruppi di caratteri permessi
$allow[] = 'number';
if(!empty($args)){
$count = 0;
foreach($args as $value){
if(!in_array($value, $allow)){
unset($args[$count]);
}
$count++;
}
}
if(empty($args)){
$permit = $allow;
}else{
$permit = $args;
}
$characters = '';
if(in_array('number', $permit)){
$characters.= '1234567890';
}
if(!is_numeric($length)){
$length = 32;
}
$string = '';
for($i=0; $i<$length; $i++){
$string = $string.substr($characters, rand(0, strlen($characters)-1), 1);
}
return $string;
}
?>
<input id="barcodenum" type="text" name="barcodenum" maxlength="11" value="<?php echo random_string(11, array('alfa_lower', 'number'));?>"/>
</div>
</div>
</body>
</html>