Consulta programación web, calculos de variables en "vivo"

Tema en 'Soporte' iniciado por kepaso, 24 Jun 2014.

< Tema Anterior | Siguiente Tema >
  1. kepaso

    kepaso Usuario Habitual nvl.3 ★
    47/82

    Registrado:
    13 Mar 2009
    Mensajes:
    14.194
    Me Gusta recibidos:
    24
    Hola me surgio una duda haciendo un sistema web en asp.net

    tengo una tabla muchos textbox y quiero calcular entre dos de ellos y que el resultado aparezca en un tercero sin que el usuario presione ningun boton, osea algo asi como un calculo en vivo.

    ejemplo:

    textbox1 + textbox2 = textbox3


    ingrese numero 1: (el usuario ingresa 2)
    <input type="text" id="textbox1" value="2">
    ingrese numero 2 (el usuario ingresa 2)
    <input type="text" id="textbox2" value="2">
    su resultado es: (el resultado se muestra en el textbox3)
    <input type="text" id="textbox3" value="4">

    lo intente hacer así

    Dim text1 As Decimal //lo peor es que son decimales
    Dim text2 As Decimal
    Dim text3 As Decimal

    textbox1.Text = text1
    textbox2.Text = text2

    text3 = text1 + text2
    text3.ToString()


    <input type="text" id="textbox3" value="<% Response.Write(text3) %>">

    y no me resulto :/ si alguien sabe como hacerlo no importa que sea en otro lenguaje asp.net no tiene problemas en mezclar lenguajes, se lo agradeceria mucho. Saludos
     
    #1 kepaso, 24 Jun 2014
  2. fzura

    fzura Usuario Nuevo nvl. 1
    1/41

    Registrado:
    17 Oct 2013
    Mensajes:
    2
    Me Gusta recibidos:
    0
    Lo puedes hacer con Jquery (debes bajar la Libreria "Jquery" para que funcione xD)
    aqui va el script :yeah:



    [TABLE]
    [TR]
    [TD="class: webkit-line-content"]<!DOCTYPE html>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]<html>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]<head>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <meta http-equiv="content-type" content="text/html; charset=UTF-8" />[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <title>Ejemplo de sumar dos campos</title>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <script type='text/javascript' src='jquery.js'></script>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <style type='text/css'>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] input {text-align:right;border-color:#808080;}[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] .text {clear:both;float:left;width:80px;}[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] .input {float:left;}[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] #total {color:#000;}[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] </style>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]</head>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]<body>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <h1>Sumar dos n&uacute;meros con jquery</h1>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <div id='suma'>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <div class='text'>N&uacute;mero 1</div><div class='input'><input type='text' name='valor1' id='valor1'></div>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <div class='text'>N&uacute;mero 2</div><div class='input'><input type='text' name='valor2' id='valor2'></div>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <div class='text'>Total</div><div class='input'><input type='text' name='total' id='total' disabled='disabled'></div>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] </div>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] <script type='text/javascript'>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // Cada vez que se pulse una tecla, controlamos que sea numerica[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] $("#suma input").keypress(function(event) {[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] //obtenemos la tecla pulsada[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] var valueKey=String.fromCharCode(event.which);[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] //obtenemos el valor ascii de la tecla pulsada[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] var keycode=event.which;[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // Si NO pulsamos un numero, un punto, la tecla suprimir[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // la tecla backspace o el simobolo "-" (45), cancelamos la pulsacion[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] if(valueKey.search('[0-9|\.]')!=0 && keycode!=8 && keycode!=46 && keycode!=45)[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] {[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // anulamos la pulsacion de la tecla[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] return false;[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] }[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] });[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // evento que se ejecuta cada vez que se suelte la tecla en cualquiera de[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // los tres inputs[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] $("#suma input").keyup(function(event) {[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] calcular();[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] });[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // Calculamos la suma de los dos valores[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] function calcular()[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] {[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] var valor1=validarNumero('#valor1');[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] var valor2=validarNumero('#valor2');[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] $("#total").val(valor1+valor2);[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] }[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"][/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // Funcion para validar que el numero sea correcto, y para cambiar el color[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] // del marco en caso de error[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] function validarNumero(id)[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] {[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] if($.isNumeric($(id).val()))[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] {[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] $(id).css('border-color','#808080');[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] return parseFloat($(id).val());[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] }else if($(id).val()==""){[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] $(id).css('border-color','#808080');[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] return 0;[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] }else{[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] $(id).css('border-color','#f00');[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] return 0;[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] }[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] }[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"] </script>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]</body>[/TD]
    [/TR]
    [TR]
    [TD="class: webkit-line-number"][/TD]
    [TD="class: webkit-line-content"]</html>

    :elvis:
    [​IMG]

    [/TD]
    [/TR]
    [/TABLE]
     
    #2 fzura, 26 Jun 2014
    Última edición: 26 Jun 2014
  3. fzura

    fzura Usuario Nuevo nvl. 1
    1/41

    Registrado:
    17 Oct 2013
    Mensajes:
    2
    Me Gusta recibidos:
    0
    #3 fzura, 26 Jun 2014
    Última edición: 23 Sep 2014
  4. gxstalbo

    gxstalbo Usuario Casual nvl. 2
    47/82

    Registrado:
    1 Ago 2008
    Mensajes:
    2.669
    Me Gusta recibidos:
    78
    hacelo con la propiedad SelectedIndexChanged de los texbot, creo que eso es lo que buscas, apretas doble click en uno y el visual studio te abre esa propiedad y te deja el metodo en blanco enseguida, puedes hacerlo como te paresca mas comodo, hacer que el usuario ingrese los numeros en la primera caja de texto y la 2da caja la dejas enable = false y seetas la propiedad a true en el SelectedIndexChanged de la primera caja de texto, o si bien programas las 2 propiedades SelectedIndexChanged tanto de la caja de texto 1 y la 2.....

    saludos
     
    #4 gxstalbo, 25 Ago 2014
(Tienes que entrar o registrarte para publicar acá.)
< Tema Anterior | Siguiente Tema >
Toggle Width
Idioma
Español (LA)