JSFiddle - React, Tailwind, and code Playground

by Felipe Eduardo

HTML

<table border="0" align="center" height="100">
			<tr>
				<td>   
					<font face="arial" align="center" valign="middle" color="blue" size="-1">PATRIMÔNIO</font><br>
					<input type="text" name="tx_patr" id="id_patr" maxlength="12" size="12" style="font-size:11; color:Black;" onkeypress="return SomenteNumero(event);" onkeyup="Mascara(this,Patri);" value="">
					<input type="button" onClick="move_patr_seri(this.form.tx_patr,this.form.cb_Patr);limpa_patr();" value=">>">
					<br>
					<select multiple size="7" name="cb_Patr" style="width:300"></select>
					<br>
					<input type="button" align="center" valign="middle" onClick="tira(this.form.cb_Patr)" value="<<">
					<br>
				</td>
				<td align="center" valign="middle" width="15%">
				</td>
				<td>  
					<font face="arial" align="center" valign="middle" color="blue" size="-1">SERIAL</font><br>
					<input type="text" name="tx_seri" id="id_seri"  maxlength="15" size="15" style="font-size:11; color:Black;" onblur="evento(this)"  value="">
					<input type="button"  onClick="move_patr_seri(this.form.tx_seri,this.form.cb_Seri);limpa_seri();" value=">>">
					<br>
					<select multiple size="7" name="cb_Seri" style="width:300"></select>
					<br>
					<input type="button" align="center" valign="middle" onClick="tira(this.form.cb_Seri)" value="<<">
					<br>
				</td>
			</tr>
		</table>

JavaScript

<?//Se encontram no PHP
var w_cont;
var w_Qtde_Peri = 3;
var w_Cont_Qtde = 0;
var    w_ver = 1;
var v_patr = new Array (w_Qtde_Peri);
?>
function move_patr_seri(Origem, Destino)
{
	var w_valor = Origem.value;
	var w_tipo;
    w_tipo = "S";

	 if((Destino.name == "cb_Seri") && (Destino.options.length == w_cont))
		{ return false;} 
	 if((Destino.name == "cb_Patr") && (Destino.options.length == w_cont))
		{ return false;}     
    
	if(Origem.name == "tx_patr")
	    {
		w_tipo = "P";
		      
	    }
	if (w_Cont_Qtde <=  w_Qtde_Peri - 1)
       {
           //Aqui é feito a inclusão na box
		if ((v_patr.indexOf(w_tipo+w_valor) == -1) && (w_valor != ""))
		{
			var opt = document.createElement("option"); 
			opt.text = w_valor ;
			opt.value = w_valor ;
			Destino.options.add(opt);
			
			v_patr[w_Cont_Qtde] = w_tipo + w_valor;		
						
			w_Cont_Qtde = w_Cont_Qtde + 1;
			if (Origem.name == "tx_patr"){ document.forms['sai_frm_incl_patr_seri'].tx_patr.focus();}
			else { document.forms['sai_frm_incl_patr_seri'].tx_seri.focus();	}		
			return true;
		}
		else
		{
		    alert("Patrimônio OU Serial já existe OU não é válido!");
			return true;
		}
	  }

	else
	if(w_ver == 1){
		if(confirm("Deseja inserir a mesma quantidade para ambos?") == true)
		{
            w_cont = w_Qtde_Peri;
			w_ver = 0;
			w_Qtde_Peri = w_Qtde_Peri + w_Qtde_Peri;
			return true;
		}
	}
	else
		alert("Quantidade informada ja Incluida !!!");
   return true; 
}

function tira(Destino)
{
	var w_letra;
	w_letra = "S";
	if (Destino.name == "cb_Patr"){
			w_letra = "P";		
		}
   
	var i;
	for(i = 0; i < Destino.options.length; i++)
	{ 
		if (Destino.options[i].selected && Destino.options[i].value != "")
		{
			w_tira = w_letra+Destino.options[i].value;
			v_patr.splice(v_patr.indexOf(w_tira), 1);		
			w_Cont_Qtde = w_Cont_Qtde - 1;						
			Destino.remove(Destino.selectedIndex);
		}
	}
}