<section>
<form id="codigobarras">
<input type="text" name="codigo" value="" placeholder="Escanear Codigo de Barras del DN" class="codigo"/>
<button type="button" name="button" class="boton" id="boton">Descargar <i class="fas fa-cloud-download-alt"></i></button>
</form>
</section>
<section class="tsect">
<table class="grilla" id="tabla">
<thead>
<tr>
<th>Id</th>
<th>NetApp Po</th>
<th>Customer Np</th>
<th>Qty</th>
<th>Rev</th>
<th>Boxes by Po</th>
<th>Dn</th>
<th>Create Date asn</th>
<th>Shipping Address</th>
<th>Description</th>
<th>So Number</th>
</tr>
</thead>
<tbody id="registros">
</tbody>
</table>
<script type="text/javascript">
/* Tras cargar el documento posicionamos el cursor en el lector de código de barras */
document.addEventListener('DOMContentLoaded', function() {
let codigobarras = document.getElementById('codigobarras');
/* Ponemos el foco en el campo "codigo" */
codigobarras.codigo.focus();
/* Capturamos el evento de envío de formulario (pulsar ENTER o pulsar Enviar) */
codigobarras.addEventListener("submit", function(e) {
/* Evitamos el envío real del formulario */
e.preventDefault();
/*agregamos el if para condicionar la validacion*/
if("input[name='codigo']"=="input[name='codigo']"){
alert "No se puede agregar codigos repetidos";
return
}if("input[name='codigo']"!="input[name='codigo']"){
alert "aqui no se como plasmar para que se agrege";
}
/* Hacemos la llamada al API (busqueda.php o el API de ejemplo) */
$.ajax({
url: 'busqueda.php',
method: 'post',
data: {
codigo: codigobarras.codigo.value,
},
})
.done(function(datos) {
/* Depuramos los datos recibidos */
console.log( datos );
/* Si no se devolvió ningún registro (false) debería hacerse algo */
if (datos === false) {
/* hacer algo */
alert('No se encontró el código de barras');
return;
}
/* Agregamos una fila con los datos obtenidos */
$('#registros').append($('<tr>')
.append($('<td>').append( datos.id ))
.append($('<td>').append( datos.net_app_po ))
.append($('<td>').append( datos.customer_np ))
.append($('<td>').append( datos.qty ))
.append($('<td>').append( datos.rev ))
.append($('<td>').append( datos.boxes_by_po ))
.append($('<td>').append( datos.dn ))
.append($('<td>').append( datos.create_date_asn ))
.append($('<td>').append( datos.shipping_address ))
.append($('<td>').append( datos.description ))
.append($('<td>').append( datos.so_number ))
);
})
.fail(function() {
alert( "Error" );
})
.always(function() {
/* Seleccionamos el texto para que se pueda sobreescribir por la siguiente lectura */
$("input[name='codigo']").select();
});
});
}, false);
</script>
</section>
busqueda.php
<?php
$servidor = 'localhost';
$base_datos = 'net';
$usuario = 'root';
$clave = '';
/* Dos métodos de poner el juego de caracteres en utf-8 */
$conexion = new PDO(
"mysql:host=${servidor};dbname=${base_datos};charset=utf8",
$usuario,
$clave,
[
PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8'"
]
);
/* Preparamos la consulta SQL */
$res = $conexion->prepare('SELECT * FROM caratulasalida WHERE dn = :codigo');
/* Asignamos el parámetro al valor enviado por POST */
$res->bindValue(':codigo', $_POST['codigo'], PDO::PARAM_STR);
/* Ejecutamos la consulta */
$res->execute();
/* Devolvemos el registro obtenido como respuesta en JSON */
header("Content-type: application/json; charset=utf-8");
echo json_encode($res->fetch(PDO::FETCH_ASSOC));
?>