Mostrando las entradas con la etiqueta javaScript. Mostrar todas las entradas
Mostrando las entradas con la etiqueta javaScript. Mostrar todas las entradas

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>






miércoles, agosto 26, 2009

Validacion campos de texto

Cuando se nesesita  validar que en un formulario los datos de entrada sean únicamente los caracteres que  se necesita capturar, utilizo algunas veces  el siguiente script de ejemplo como guía para hacer la validación.

Dentro de la etiquea HEAD

<script language="javascript">
   // Jorge Olaya  (http://jorgeolaya.blogspot.com/)- Validacion de campos de texto
   // Mauricio Escobar, 30/08/00. Validacion de campos sin usar expresiones regulares.
   //
   //Este script y otros muchos pueden
   //descarse on-line de forma gratuita
   //en El Código: www.elcodigo.net
   function ValidaCampo(campo, caract_extra, nulo)
   {
    if (nulo == 1 && campo == "")
    {
     alert("ERROR: No puede dejar este campo vacio")
     return false
    }
    var ubicacion
    var enter = "\n"
    var caracteres = "abcdefghijklmnopqrstuvwxyzñ1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÑáéíóúÁÉÍÓÚ" + String.fromCharCode(13) + enter + caract_extra
    var contador = 0
    for (var i=0; i < campo.length; i++)
    {
     ubicacion = campo.substring(i, i + 1)
     if (caracteres.indexOf(ubicacion) != -1)
     {
      contador++
     }
     else
     {
      alert("ERROR: No se acepta el caracter '" + ubicacion + "'.")
      return false
     }
    }
    //para que envie los datos, quitar las  2 lineas siguientes
    alert("Datos correctos.")
    return false
   }
  
</script>


Dentro de la etiqueta BODY

<form action="" name="formulario2" onsubmit="return ValidaCampo(this.texto.value, '', 0)">
<small>Texto:</small>

  <textarea cols="14" name="texto" rows="4"></textarea>
  <br />
<input name="enviar" type="submit" value="Enviar" />
  </form>