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

kepaso · 24 Jun 2014

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

fzura · 26 Jun 2014

Lo puedes hacer con Jquery (debes bajar la Libreria "Jquery" para que funcione xD)
aqui va el script :yeah:

[TD="class: webkit-line-content"]<!DOCTYPE html>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<html>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<head>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <meta http-equiv="content-type" content="text/html; charset=UTF-8" />[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <title>Ejemplo de sumar dos campos</title>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <script type='text/javascript' src=' jquery.js '></script>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <style type='text/css'>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] input {text-align:right;border-color:#808080;}[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] .text {clear:both;float:left;width:80px;}[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] .input {float:left;}[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] #total {color:#000;}[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] </style>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</head>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]<body>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <h1>Sumar dos números con jquery</h1>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <div id='suma'>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <div class='text'>Número 1</div><div class='input'><input type='text' name='valor1' id='valor1'></div>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <div class='text'>Número 2</div><div class='input'><input type='text' name='valor2' id='valor2'></div>[/TD]

[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]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] </div>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] <script type='text/javascript'>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // Cada vez que se pulse una tecla, controlamos que sea numerica[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] $("#suma input").keypress(function(event) {[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] //obtenemos la tecla pulsada[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] var valueKey=String.fromCharCode(event.which);[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] //obtenemos el valor ascii de la tecla pulsada[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] var keycode=event.which;[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // Si NO pulsamos un numero, un punto, la tecla suprimir[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // la tecla backspace o el simobolo "-" (45), cancelamos la pulsacion[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] if(valueKey.search('[0-9|\.]')!=0 && keycode!=8 && keycode!=46 && keycode!=45)[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] {[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // anulamos la pulsacion de la tecla[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] return false;[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] }[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] });[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[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]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // los tres inputs[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] $("#suma input").keyup(function(event) {[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] calcular();[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] });[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // Calculamos la suma de los dos valores[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] function calcular()[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] {[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] var valor1=validarNumero('#valor1');[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] var valor2=validarNumero('#valor2');[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] $("#total").val(valor1+valor2);[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] }[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"][/TD]

[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]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] // del marco en caso de error[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] function validarNumero(id)[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] {[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] if($.isNumeric($(id).val()))[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] {[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] $(id).css('border-color','#808080');[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] return parseFloat($(id).val());[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] }else if($(id).val()==""){[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] $(id).css('border-color','#808080');[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] return 0;[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] }else{[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] $(id).css('border-color','#f00');[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] return 0;[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] }[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] }[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"] </script>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</body>[/TD]

[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]</html>

:elvis:

[/TD]

fzura · 26 Jun 2014

aqui el ejemplo

http://jsfiddle.net/fzura/ctfcy0q7/

gxstalbo · 2014-08-25T15:20:42-0400

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

Buscar

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

kepaso

Usuario Habitual nvl.3 ★

fzura

Usuario Nuevo nvl. 1

fzura

Usuario Nuevo nvl. 1

gxstalbo

Usuario Casual nvl. 2