Visualizzazione dei risultati da 1 a 1 su 1

Discussione: Auto-invio di un valore javascript dentro un input html

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2018
    residenza
    Messina
    Messaggi
    1

    Auto-invio di un valore javascript dentro un input html

    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>
    Ultima modifica di MarioProgrammo; 13-03-2018 a 19:48

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.