Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Resultados de los cálculos en la misma página.

HTML - Resultados de los cálculos en la misma página.

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Jose A.

Resultados de los cálculos en la misma página.

Publicado por Jose A. (2 intervenciones) el 20/04/2022 11:48:58
Hola a todos, llevo unas semanas aprendiendo Django y HTML, y me encontrado con el inconveniente de que necesito recoger en tres/cuatro campos unas cantidades hacer unos cálculos y devolverlos a la misma página. No he encontrado nada que vea que sea optimo, porque lo que actualmente hago en reenviar todos los campos (Django) a la misma página, dependiendo de si es o no GET/POST. Pero no veo que esta solución sea óptima. Desde mi punto de vista neófito, seria un HTML dentro de otro, como se hace un formulario m/padre con un formulario hijo/a, con los head y foot. Agradecería una ayuda u orientación. Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Resultados de los cálculos en la misma página.

Publicado por Ivan (57 intervenciones) el 20/04/2022 18:21:59
Hola,

puedes utilizar JavaScript para trabajar con los campos y mostrar el resultado en la misma página HTML, sin necesidad de enviar nada con GET/POST si no es necesario.

Te pongo un ejemplo muy básico de una calculadora:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction(op) {
      var numA = parseInt(document.getElementById("numA").value);
      var numB = parseInt(document.getElementById("numB").value);
      var numR = 0;
      switch (op) {
        case '+' : numR = numA + numB; break;
        case '-' : numR = numA - numB; break;
        case '*' : numR = numA * numB; break;
        case '/' : numR = numA / numB; break;
      }
      document.getElementById("numR").innerHTML = '(' + numA + ' ' + op + ' ' + numB + ') = ' + numR;
    }
  </script>
</head>
 
<body>
  <h1>Calculadora JavaScript</h1>
  <p>Ejemplo de calaculadora básica con JavaScript</p>
  <fieldset>
    <legend>Introduce 2 números</legend>
    <p><label>A: <input id="numA" name="numA" type="number" /></label> <label>B: <input id="numB" name="numB" type="number" /></label></p>
    <p>Resultado: <span id="numR">0</span></p>
  </fieldset>
  <p>Click en los botones para operar</p>
  <button onclick="myFunction('+')">Sumar</button>
  <button onclick="myFunction('-')">Restar</button>
  <button onclick="myFunction('*')">Multiplicar</button>
  <button onclick="myFunction('/')">Dividir</button>
</body>
</html>

- Los campos de formulario tienen un identificador único para obtener sus valores.

- Dentro de la función myFunction obtengo los valores y los transformo a números (parseInt), porque pese a que especifico el type="number" en el input, el operador '+' puede dar problemas y sumarlos como textos.

- El resultado lo muestro en el elemento id="numR"

Supongo que con esto te servirá.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose A.

Resultados de los cálculos en la misma página.

Publicado por Jose A. (2 intervenciones) el 20/04/2022 20:49:58
Agradezco mucho tu ayuda, me sirve mucho como orientación, lo estudiare para hacerlo con Django, hay algunos campos mas y validaciones que quiero hacer con él, en lugar de JavaScript, que desconozco por completo. De nuevo, gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar