martes, septiembre 08, 2009

Calculos dinamicos del lado del cliente con javaScript


Los siguiente fragmentos de codigo tiene como objetivo realizar operaciones matematicas sobre los campos
tipo texto en el lado del cliente utilizando JavaScript.

El formulario de captura se abre de la manera sencilla, el metodo no inside en el objetivo, en el action utilizo 

la  variable de servidor que vuelve y llama el script en ejecucion

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post"><br></form><br>

Se utiliza como tipo de dato de entrada texto; para el nombre de el campo texto se utiliza un arrego,
en el ejemplo utilizo el "10" asi: nombre_variable[10]. Depende del numero de campos con el que quiero hacer
operaciones. tambien podria ser una variable.

La funcion de nombre recalculo tiene como datos de entrada tres variables: las dos primeras
son el nombre de los campos que qeuiro hacer operaciones. l atercera es el nombre del campo
donde visualizo el resultado

El id es importante definirlo bien, con el id se va a direccionar la respuesta del calculo

<input id="" name="nombre_variable[10]" onblur="recalculo(,'','');" type="text" value="" />

Script donde esta la funcion que realiza los cálculos

<script language="JavaScript" type="text/JavaScript">
function recalculo(uno,dos , tres)
{
  // Jorge olaya (http://jorgeolaya.blogspot.com/) - script para hacer calculos sobre campos.
  uno_10 = uno+"10";
  uno_11 = uno+"11";    
  valor_diez  = document.getElementById(uno_10).value;
  valor_diez = parseFloat(valor_diez);
  if (valor_diez >=0 )
  {
   // nada
  }
  else
  {
   valor_diez = 0;
  }
  valor_once  = document.getElementById(uno_11).value;
  valor_once = parseFloat(valor_once);
  if (valor_once >=0 )
  {
   // nada
  }
  else
  {
   valor_once = 0;
  }
  sumatoria = valor_diez + valor_once ;
  var numero = new oNumero(sumatoria)
  sumatoria2 = (numero.formato(2, true));
  document.getElementById(dos).value = sumatoria2;
  valor_dife = document.getElementById(cuatro).value;
  valor_dife = parseFloat(valor_dife);
  valor_real = document.getElementById(real).value;    
  valor_real = parseFloat(valor_real);
  diferenciacion = (valor_real) - sumatoria;
  var numero = new oNumero(diferenciacion);
  sumatoria2 = (numero.formato(2, true));
  document.getElementById(tres).value = sumatoria2;        
}
</script>

Utilizo el script de abajo para formatear los valores resultados del calculo.

Este script tambien se puede utilizar en todos los eventos que nesesitemos darle formato 
a un valor.

<script language="JavaScript" type="text/JavaScript">
// jorge olaya - script para convertir valores a valores numericos reales.
//Mas en: http://javascript.espaciolatino.com/
//Objeto oNumero
function oNumero(numero)
{
  //Propiedades
  this.valor = numero || 0
  this.dec = -1;
  //Métodos
  this.formato = numFormat;
  this.ponValor = ponValor;
  //Definición de los métodos
  function ponValor(cad)
  {
   if (cad =='-' || cad=='+') return
   if (cad.length ==0) return
   if (cad.indexOf('.') >=0)
    this.valor = parseFloat(cad);
   else
    this.valor = parseInt(cad);
  }
  function numFormat(dec, miles)
  {
   var num = this.valor, signo=3, expr;
   var cad = ""+this.valor;
   var ceros = "", pos, pdec, i;
   for (i=0; i < dec; i++)
   ceros += '0';
   pos = cad.indexOf('.')
   if (pos < 0)
    cad = cad+"."+ceros;
   else
   {
    pdec = cad.length - pos -1;
    if (pdec <= dec)
    {
     for (i=0; i< (dec-pdec); i++)
     cad += '0';
    }
    else
    {
     num = num*Math.pow(10, dec);
     num = Math.round(num);
     num = num/Math.pow(10, dec);
     cad = new String(num);
    }
   }
   pos = cad.indexOf('.')
   if (pos < 0) pos = cad.lentgh
   if (cad.substr(0,1)=='-' || cad.substr(0,1) == '+')
    signo = 4;
   if (miles && pos > signo)
   do{
    expr = /([+-]?\d)(\d{3}[\.\,]\d*)/
    cad.match(expr)
    cad=cad.replace(expr, RegExp.$1+','+RegExp.$2)
   }
   while (cad.indexOf(',') > signo)
    if (dec<0) cad = cad.replace(/\./,'')
     return cad;
  }
}//Fin del objeto oNumero:
</script>






No hay comentarios.: