Real Combo Box (Text + Drop Down) ?

M

mcanedo

Hi:
I'm working on a point of sale application driven by PHP and mysql, but I'm
using javascript for the forms control, this is the first time I use
javascript, so I still do not know many tricks...

I have one problem, the code (Codigo) field is going to be filled by a
barcode scanner input, then my problem is:
If the barcode reads FER-315, and that exists in the select field, then
everythig it's OK.

But let's say that there is a barcode that for some reasons reads FER-999.
If that does not exists in the select field, the html select field is going
to take the first closer occurence, lets say FER-315.

So insted of the Select field I already have. I want to know if the next is
possible, and how?

I want to have a text field that can accept any value, then onChange I can
compare the input data with the valid array data and if that does not
exist, I can do whatever I want. OK that can be easy.

But I want the text field to be able to convert into a dropdown menu if I
click it with te mouse (so I can choose from the list).

In few words I need a "combo box", not just a drop down menu.

Is that possible ?

Thanks,
Miguel


I'm also posting the full page code, so you can see the context:




<html>
<head><TITLE></TITLE>
<STYLE type="text/css">
body{background:gray;color:yellow;}
input{border-color:transparent}
..cEtiqueta{background:black;color:yellow;font-weight:bold;
border-width:1px;text-align:right;}
..cEditable{background:white;color:black;font-weight:bold;;border-width:1px;text-align:right;}
..cTitulo{background:white;color:black;font-weight:bold;border-width:1px;text-align:center;}
..cCodigo{background:white;color:black;font-weight:bold;border-width:1px;text-align:left;}
..cCantidad{background:white;color:black;font-weight:bold;border-color:transparent;border-width:1px;text-align:right;width:20px}
..cDescripcion{background:black;color:yellow;font-weight:bold;
border-width:1px;text-align:left;}
..cEspecial{background:white;color:red;font-weight:bold;border-width:1px;text-align:right;}
..cTotal
{background:white;color:red;font-weight:bold;font-size:large;border-width:1px;text-align:right;}
</STYLE>
<script type="text/javascript">

var vRenglones=10;

var vCodigo =new
Array(null,"FER-315","FER-330","ACM-BL","FER-CHAM","ACM-PAN","ARE-5","VSI-PAN","VSI-CHA","ALGO-COM");
var vDescripcion = new Array(null,"Fergino Mezclilla","Fergino
Gabardina","Blusa ACM","Chamarra
Fergino","ACM-PAN","ARE-5","VSI-PAN","VSI-CHA","ALGO-COM");
var vPrecio = new Array(null,315.00,330.00,270.00,420.00,200,100,50,120,136)
var vPromocion = new
Array(null,300.00,null,250.00,null,190,90,40,null,null,null)

var vSalgode
var vEntroA

//actualiza el renglon con el valor selecionadp
function compute(form, select, indice){

form.fCantidad[indice].value=1;
form.fDes[indice].value=vDescripcion[select.selectedIndex];
form.fPrecio[indice].value=vPrecio[select.selectedIndex];
form.fPromocion[indice].value=vPromocion[select.selectedIndex];
calcularRenglon(form,indice);
//se cambaia el foco excepto en el ultimo renglon
if(indice+1<vRenglones){
form.codigo[indice+1].focus(); //verificar la ultima y mandar al boton
}

}

//calcula el monto del renglon indice de la forma form y el Total
function calcularRenglon(form,indice){
var vTotal=0;
if(form.fPromocion[indice].value==""){

form.fMonto[indice].value=form.fCantidad[indice].value*form.fPrecio[indice].value;
}else{

form.fMonto[indice].value=form.fCantidad[indice].value*form.fPromocion[indice].value;
}

for (ren=0;ren<vRenglones;ren++){
if (typeof form.fMonto[ren].value != "undefined"){
vTotal=vTotal+(form.fMonto[ren].value*1); //*1 para que tome como numero
}
}
form.fTotal.value=vTotal;
}



//Cambiar al siguieten o anterior campo
onload = function()
{
        var idx = 0, el, els = document.forms[0].elements;
        while (el = els.item(idx++))
                if (el.name)
                {
                        el.idx = idx-1;
el.nextIdx = idx+1;
                        el.onfocus = function()
                        {
vEntroA=this.idx;
if (this.readOnly){
if (vEntroA>vSalgoDe){
this.form.elements[this.idx+1].focus();
}else{
this.form.elements[this.idx-1].focus();
}
}

                        }
                        el.onblur = function()
                        {
vSalgoDe=this.idx;

                        }
                
}
        if ((el = els[idx - 2]).readOnly)
                //el.nextIdx = 0;
el.idx = 0;
}



</script>


</head>

<body>
<table>
<form name=fVentas method="POST">
<tr>
<TD class="cTitulo">Codigo</TD>
<td class="cTitulo">Cantidad</td>
<td class="cTitulo">Descripcion</td>
<td class="cTitulo">Precio</td>
<td class="cTitulo">Especial</td>
<td class="cTitulo">Monto</td>
</tr>

<script type="text/javascript">
//escribe tal cantidad de renglones
for (i=0;i<vRenglones;i++){
//esto es todo un renglon de la tabla
document.write("<tr>");
document.write("<td class=\"cCodigo\">");
document.write("<select name=\"codigo\" class=\"cCodigo\"
onChange=\"compute(this.form, this.form.codigo["+i+"],"+i+")\">");
document.write("<option selected=\"true\" value=\"0\"></option>");
//Imprimir el select segu el array
for (j=1;j<vCodigo.length;j++){
document.write("<option value=\""+vCodigo[j]+"\">"+vCodigo[j]+"</option>");
}
document.write("</select>");
document.write("</td>");
document.write("<td class=\"cCantidad\"><input type=\"text\"
class=\"cCantidad\" name=\"fCantidad\"
onChange=\"calcularRenglon(this.form,"+i+")\" ></td>");
document.write("<td class=\"cDescripcion\"><input type=\"text\"
class=\"cDescripcion\" name=\"fDes\" readonly=\"readonly\"></td>");
document.write("<td class=\"cEtiqueta\"><input type=\"text\"
class=\"cEtiqueta\" name=\"fPrecio\" readonly=\"readonly\"></td>");
document.write("<td class=\"cEspecial\"><input type=\"text\"
class=\"cEspecial\" name=\"fPromocion\"
onChange=\"calcularRenglon(this.form,"+i+")\" ></td>");
document.write("<td class=\"cEtiqueta\"><input type=\"text\"
class=\"cEtiqueta\" name=\"fMonto\" onFocus=\"quien(this)\"
readonly=\"readonly\"></td>");
document.write("<tr>");
document.write("</tr>");
}
</script>



<tr><TD>
</TD><td>
</td><TD>
</TD><TD>
</TD><TD>Total</TD>
<TD class="cTotal"><input type="text" name="fTotal" readonly="readonly"
class="cTotal"></TD></tr>
<tr><TD><input type="button" value="Vender" onclick="submit()"></TD></tr>


</table>


</form>


</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top