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>
Rispondi quotando
