Necesito idea de como lograr un flujo continuo

[sentnel]

Hola a todos nuevamente!

Mucho les agradeceria si pueden ver esta pagina en la que intento scanear los codigos de barra de paquetes que van a ser entregados, me retorna lla descripcion del articulo, el peso y habra de calcular la tarifa o precio.

Mi problema es:

1- Cómo, despues de escanear un primer paquete retorno el cursor en "focus" al campo de texto de "scan" para que este listo para el proximo escaneo?


2- Como hago para escanear repetidamente y que el sistema agregue los datos del segundo paquete a la segunda fila, y asi sucesivamente?

Agradezco sus opiniones y comentarios!

A continuacion el codigo de la pagina en cuestion:

Código:

<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(",");
        document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
		document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
		document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
		document.getElementById('articulo').innerHTML = httpObject.innerHTML= respuesta[0];
		document.getElementById('peso').innerHTML = httpObject.innerHTML= respuesta[1];
		document.getElementById('precio').innerHTML = httpObject.innerHTML= respuesta[2];
    }
 
}
 
// Implement business logic    
function doWork(){    
    httpObject = getHTTPObject();
    if (httpObject != null) {
        httpObject.open("GET", "procesador.php?inputText="
                        +document.getElementById('inputText').value, true);
        httpObject.send(null); 
        httpObject.onreadystatechange = setOutput;
    }
}
 
var httpObject = null;
 
//-->


</script>

 
<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 &nbsp;<strong>8802946000357</strong>&nbsp; (copie y pegue el codigo en &quot;Scan&quot; y presione &quot;Enter&quot;)<br />
  
  
  
  <br />
  
</p>
<div id='resultadosScan1'>  <div id="articulo" class="articulo">Articulo</div>
  &nbsp;<div id="peso" class="peso">Peso</div><div id="precio" class="precio">Precio</div></div><br />
  
  <div id='resultadosScan2'>  <div id="articulo2" class="articulo">Articulo</div>
  &nbsp;<div id="peso2" class="peso">Peso</div><div id="precio2" class="precio">Precio</div></div><br />

Los estilos son estos, por si acaso:

Código:

<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; float:left; margin-left: 10px; text-align:center;}
	  .peso {width: 150px; border:1px solid #309; float:left; margin-left:20px; text-align:center;}
	  .precio {width: 150px; border:1px solid #309; float:right; 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>