Como haz dicho que las dos opciones son validas, he optado por validar el tamaño del string a 13, validar la pulsación del enter es relativamente sencillo, el resultado:
Código HTML:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
var respuesta = httpObject.responseText.split(",");
var res = document.getElementById("resultadosScan1");
var art = document.createElement("div");
var peso = document.createElement("div");
var precio = document.createElement("div");
art.className = "articulo";
peso.className = "peso";
precio.className = "precio";
document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
art.innerHTML = httpObject.innerHTML= respuesta[0];
peso.innerHTML = httpObject.innerHTML= respuesta[1];
precio.innerHTML = httpObject.innerHTML= respuesta[2];
res.appendChild(art);
res.appendChild(peso);
res.appendChild(precio);
}
}
// Implement business logic
function doWork(){
var text = document.getElementById('inputText').value;
if(text.length == 13) {
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "prueba.php?inputText="
+text, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
document.getElementsByName("testForm").item(0).reset();
document.getElementById('inputText').focus();
}
}
}
var httpObject = null;
//-->
</script>
<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; }
BODY { font-size: 100%; }
H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
DIV.selHolder { float: left; border: 3px solid #ccc; margin: 10px; padding: 5px;}
TEXTAREA { width: 80%;}
FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
LEGEND { color: #ccc; font-size: 120%; }
INPUT, TEXTAREA { font-family: Arial, verdana; padding: 3px; border: 1px solid #999; }
LABEL { display: block; margin-top: 10px; }
IMG { margin: 5px; }
SELECT { margin: 10px; width: 200px; }
#resultadosScan1, #resultadosScan2, #resultadosScan3 { width:750px; border: 3px solid #ccc; padding:10px; }
.articulo {width: 350px; border:1px solid #309; display:inline-block; margin-left: 10px; text-align:center;margin-bottom: 10px; }
.peso {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
.precio {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
#outputText0 { width:1px; border:0px; color:#ffffff;}
#outputText1 { width:1px; border:0px; color:#ffffff;}
#outputText2 { width:1px; border:0px; color:#ffffff;}
-->
</style>
</head>
<body>
<form name="testForm">
Scan:
<input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
<input type="text" name="outputText0" id="outputText0"/>
<input type="text" name="outputText1" id="outputText1" />
<input type="text" name="outputText2" id="outputText2" />
</form>
<p>
<script language="JavaScript">
<!--
document.testForm.inputText.focus();
//-->
</script>
</p>
<p>Pruebe insertando el codigo <strong>8802946000357</strong> (copie y pegue el codigo en "Scan" y presione "Enter")<br />
<br />
</p>
<div id='resultadosScan1'></div><br />
<div id='resultadosScan2'> <div id="articulo2" class="articulo">Articulo</div>
<div id="peso2" class="peso">Peso</div><div id="precio2" class="precio">Precio</div></div><br />
</body>
</html>
Ahora si procedo a explicar los cambios realizados:
1- el reset y focus() del cual hable:
Código Javascript
:
Ver originalfunction doWork(){
var text = document.getElementById('inputText').value;
if(text.length == 13) {
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "prueba.php?inputText="
+text, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
document.getElementsByName("testForm").item(0).reset();
document.getElementById('inputText').focus();
}
}
}
Se deben validar que se digiten 13 caracteres exactos para ahí si proceder a realizar la petición y seguidamente restear el formulario de nombre testForm y pasarle el focus al campo con id inputText.
2- Manejo del DOM:
Código Javascript
:
Ver originalfunction setOutput(){
if(httpObject.readyState == 4){
var respuesta = httpObject.responseText.split(",");
var res = document.getElementById("resultadosScan1");
var art = document.createElement("div");
var peso = document.createElement("div");
var precio = document.createElement("div");
art.className = "articulo";
peso.className = "peso";
precio.className = "precio";
document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
art.innerHTML = httpObject.innerHTML= respuesta[0];
peso.innerHTML = httpObject.innerHTML= respuesta[1];
precio.innerHTML = httpObject.innerHTML= respuesta[2];
res.appendChild(art);
res.appendChild(peso);
res.appendChild(precio);
}
}
Cada vez que se realice una petición al servidor se crean tres divs y se les asignan sus clases correspondientes (articulo, precio y peso), luego a cada div se le inserta (mediante innerHTML) los datos recogidos de la petición AJAX y se adhiren al div de id resultadosScan1 que ya se había ubicado anteriormente mediante document.getElementById(). De esta manera cada consulta creara tres div con los valores especificados.
3- cambio de stilo:
Código CSS:
Ver original.articulo {width: 350px; border:1px solid #309; display:inline-block; margin-left: 10px; text-align:center;margin-bottom: 10px; }
.peso {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
.precio {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
por ultimo cambio los estilos de las clases articulo, precio y peso, ya que manejan floats lo cual descuadra el resultado final, dejando divs flotantes por lodos lados cada vez que se adhiren los tres divs a resultadosScan1, así que en vez de float utilizo
display:inline-block;.
Resultado final:
Edito: al final del div precio aparecen más valores, eso se debe a un mal manejo del script del lago del servidor

.