Javascript presupuesto AJAX

LzO

Pues estoy haciendo un curso de programacion web y ahora estoy haciendo un ejercicio de javascript donde se me plantea hacer lo siguiente:

En esta página pondremos un formulario en el que se deben rellenar una serie
de campos. Para generar un presupuesto estimado, dentro del campo ‘Tipo de
página’ pondremos tres o cuatro con diferentes precios base (inventados), a los
que habrá que restarle un 5% por cada mes de plazo que tengamos para entregar
la web (máximo 20%). Por último, sumaremos 400 Euros extra por cada
casilla marcada de secciones.
Todo ello debe ir actualizando el campo de presupuesto con cualquier cambio y
sin refrescar la web.

Estoy atascado, mas o menos tengo la idea de como hacerlo, al cambiar algo de formulario, mediante evento onclick u onchange según, llame a una función para chequear.

Por ejemplo dentro del grupo tipo de webs, si ya hay alguna seleccionada, la borre de la variable total y añada la nueva.

En el grupo de plazos, seria mediante un document.getElementById coger el value y descontarle a total el % que le corresponde segun los plazos.

Y luego en los extras, sumarle a la variable total 400€ cuando se selecciona una y restarle cuando se quitan.

el campo presupuesto se irá actualizando sin refrescar la pagina, con document.getElementById seria lo suyo.

El caso es que no arranco, y lo básico que hago para ir tanteando la jugada me sale mal.

Por ejemplo estoy haciendo una prueba, de actualizar sin refrescar, con un ejemplo que no tiene nada que ver con el ejercicio y no me sale.

<html>
	<head>
		<title>Titulo</title>
		<script type="text/javascript">
			total = 0;
			function comprobar(x) {
				if (x == 1) {
					total = total + document.getElementById("1").value;
					document.getElementById("resultado").value = parseInt(total);
				}
				else if (x == 2) {					
					total = total + document.getElementById("2").value;
					document.getElementById("resultado").value = parseInt(total);
				}
				else if (x == 3) {
					total = total + document.getElementById("3").value;
					document.getElementById("resultado").value = parseInt(total);
				}
			}
		</script>
	</head>
	<body>
		<input type="textbox" id="1" onchange="comprobar(this.id)">
		<input type="textbox" id="2" onchange="comprobar(this.id)">
		<input type="textbox" id="3" onchange="comprobar(this.id)">
		<input type="textbox" id="resultado">	
	</body>
</html>

En el resultante de ese ejemplo, si en el primer campo escribo 1 y en el segundo escribo 2, el campo con id resultado me da 10, cuando deberia de dar 3 segun mi intencion xd

Eso es solo un ejemplillo para yo ir tanteando la jugada, pero mal empezamos.

Igualmente pido ayuda para ver si alguien tiene alguna otra manera mejor de razonar el ejercicio, yo como digo lo haria con condiciones if/else pero se me está haciendo engorroso y no me sale.

Gracias de antebrazo.

eXtreM3

El evento onchange te funciona? He probado a cambiarlo por onkeyup poniendo un alert en cada caso de la función y me muestra bien el alert cuando escribo algo en alguna de las casillas. Pero no hace bien el resultado... no suma, concatena.

Échale un vistazo a la operación, no piloto mucho de js pero, no tienes que definir la variable 'total' como numérica? Supongo también que concatena por el "+", que no lo interpreta como suma sino como variable+variable. Arreglando eso debe funcionar correctamente, miraver ;)

2 respuestas
LzO

#2 Yo diría que lo auto-soluciono con la función parseInt() propia del js que convierte cadena a entero.

Fijate en el código.

De todos modos tendrías alguna idea mejor que la mia de afrontar el desarrollo del ejercicio?

Ese ejemplo es simplemente para coger tino al asunto, me gustaría saber como veis (además de corregir el ejemplo) el planteamiento que puse de ir haciendo condiciones para lo del presupuesto.

#4 Gracias, lo miraré. Y tu tienes alguna idea de como plantear el desarrollo del presupuesto? me trae dolores de cabeza de hace semanas.

1 respuesta
EnZo

Para hacer la suma tienes que parsear el valor de los inputs. Estan como string (texto) y en vez de sumarlos los concatena. Añadele la funcion parseInt a cada getElementBy...

total = total + parseInt(document.getElementById("1").value);

Y si quieres puedes quitarselo al del total, ya que previamente esta como int.

#2 Yo tambien me he quedado O_o xD no sabia que se podia usar en los inputs. Creo que no es un standar, o como minimo en ie no vá para dar porculo como siempre xD

#3 El ejercicio entero no me he puesto a ver como se hace. Me da pereza xD, lo que si te puedo decir es que el planteamiento de la funcion comprobar está mal. No reseteas el total cada vez que ejecutas comprobar.

2 respuestas
LzO

#4 pero si reseteo total a 0 y vuelvo a hacer algun cambio, no tendria de donde sumarle/restarle nada al estar a 0 no?

uyyy que me parece que voy a tener que coger el temario de nuevo.. :qq:

1 respuesta
TaiCHoKe

onchange yo creo que te va a dar problemas con <input>. Tal como lo tengo yo concebido es mas para <select> o cosas con parametros ya definidos.

1 respuesta
EnZo

#5 Se supone que lo que tiene que hacer es sumar los 3 haya el resultado que haya. No tienes que guardar los cambios. Porque tal y como lo tienes cuando pones 1 2 3 la suma es 6. pero si los cambias a 1 1 1 tu resultado será 9. Debe tener ese comportamiento? tu resultado puede ser infinito...

1 respuesta
catalon
<html>
        <head>
                <title>Titulo</title>
                <script type="text/javascript">
                        total = 0;
                        function comprobar() 
                            total=0;
                            if(parseInt(document.getElementById("1").value)) val1=parseInt(document.getElementById("1").value);
                            else val1=0;
                            if(parseInt(document.getElementById("2").value)) val2=parseInt(document.getElementById("2").value);
                            else val2=0;
                            if(parseInt(document.getElementById("3").value)) val3=parseInt(document.getElementById("3").value);
                            else val3=0;
                            total=val1+val2+val3;
                            document.getElementById("resultado").value = total;
                        }
                </script>
        </head>
        <body>
                <input type="textbox" id="1" onchange="comprobar()">
                <input type="textbox" id="2" onchange="comprobar()">
                <input type="textbox" id="3" onchange="comprobar()">
                <input type="textbox" id="resultado">   
</body> </html>
1 respuesta
LzO

gracias #6 #7 #8 me temia que el tema iba a centralizarse en el ejemplo y no en lo más importante que busco y asi está siendo

mi gran duda aparte viene a ser como plantear el desarrollo del ejercicio del presupuesto.

1 respuesta
catalon

#9 Fijate en lo que he hecho bien. Lo que tienes que hacer es una funcion que realize todos los calculos partiendo de cero en lugar de ir sumando esto o lo otro en funcion de lo que pinchas o seleccionas. A esa funcion la llamas en cada evento que te interese y ya esta.

1 respuesta
LzO

#10 a vale entendido, si la verdad es que yo me estaba enredando demasiado... como tu dices sumando por cada cosa que pincho/selecciono... mejor hacer el recorrido/suma completo cada vez que pincho que verifique todo

gracias! ya postearé el resultado mañana cuando me ponga!!! :P

tada
<html>
    <head>
        <title>Titulo</title>
        <script type="text/javascript">
			function comprobar() { 
				var total = 0;
				var elem = document.getElementsByClassName("num");
				for (var i = 0; i < elem.length; i++) {
					var num = 0;
					if(parseInt(elem[i].value)) num = parseInt(elem[i].value);
					
				total += num;
			}
			document.getElementById("resultado").value = total;
		}
    </script>
</head>
<body>
        <input type="text" class="num" onkeyup="comprobar()">
        <input type="text" class="num" onkeyup="comprobar()">
        <input type="text" class="num" onkeyup="comprobar()">
        <input type="text" id="resultado">   
</body>
</html>

De esta forma te ahorras líneas y puedes añadir tantos campos como te de la gana sin tener que tocar la función..

1 respuesta
LzO

#12 vaya muchas gracias :D

1 mes después
I

Hola a todos, es mi primer post en la página y ya empiezo pidiendo ayuda jeje.
Estoy interesado en este ejercicio, tengo que hacer un presupuesto parecido y no sé por dónde empezar!
Me serviría de ayuda que compartieras el código.
Gracias de antemano.

Usuarios habituales