Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ayuda con un ejercicio de javascript, por favor

JavaScript - Ayuda con un ejercicio de javascript, por favor

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Ayuda con un ejercicio de javascript, por favor

Publicado por Pablo (4 intervenciones) el 23/06/2022 02:14:49
Buenas a tod@s, soy estudiante de programación y necesito ayuda con un ejercicio, alguien me puede ayudar? tengo que crear un formulario con presupuesto, (ya esta creado, os dejo el codigo abajo), que según lo que ponga después tiene que aumentar o bajar el precio, el problema viene en la parte de javascript, que no soy capaz, y era por si alguien me puede ayudar a generarlo, le estaria muy agradecido. Tiene que tener las siguientes características.

- En el campo producto: es un select con cuatro opciones: seleccione categoria / diseño de pagina web / desarrollo de apps / posicionamiento seo/sem cada producto tendrá un precio diferente

- En el campo plazo: es un campo numérico, que dependiendo del numero de meses en los que desea recibir el producto, se le aplicara un descuento sobre el presupuesto final.

- Extras: puse tres checkeds: tienda online / diseño grafico / redes sociales . que cada opción que se seleccione aumentara el presupuesto.

- en el campo presupuesto: en este campo se deberá de actualizarse con cualquier cambio que se realice en las elecciones del producto, meses y extras, sin utilizar botones ni refrescar la pagina.




Me falta el código de js que no soy capaz de hacerlo, alguien me puede ayudar por favor? muchas gracias de ante mano, os dejo el código de html del formulario entero:



<form class="formulario-presupuesto" name="formulario" id="formulario" method="post" action="procesar.php">
<fieldset>
<legend>Datos</legend>
<div class="formularioitems">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Nombre" required>
</div>
<div class="formularioitems">
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" required>
</div>
<div class="formularioitems">
<label for="telefono">Teléfono de contacto:</label>
<input type="tel" name="telefono" id="telefono" placeholder="Teléfono" required>
</div>
<div class="formularioitems">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Email" required>
</div>
</fieldset><br>

<fieldset>
<legend>Presupuesto</legend>
<div class="formularioitems">
<label for="productos">Productos:</label>
<select name="selecion" size="1">
<option value="vacio">Seleccione categoria</option>
<option value="diseñopaginaweb">Diseño de página web</option>
<option value="desarrollodeapps">Desarrollo de apps</option>
<option value="posicionamiento">Posicionamiento SEO/SEM</option>
</select>
</div>
<div class="formularioitems">
<label for="plazo">Plazo (en meses):</label>
<input type="number" name="plazo" id="plazo">
</div>
<div class="formularioitems">
<p>Elija los extras para el producto:</p><br>
<label for="extra1">Tienda online</label>
<input type="checkbox" name="extra1" id="extra1">
<label for="extra2">Diseño gráfico</label>
<input type="checkbox" name="extra2" id="extra2">
<label for="extra2">Redes sociales</label>
<input type="checkbox" name="extra3" id="extra3">
</div>
<div class="formularioitems">
<label for="presupuesto">Presupuesto</label>
<input type="text" name="presupuest" id="container" readonly>
</div>
</fieldset><br>

<fieldset>
<legend>Aceptación de los términos y las condiciones de privacidad</legend>
<div class="formulariocheck">
<input type="checkbox" name="chterminos" id="chterminos" required>
<label for="chterminos">Acepto los términos y condiciones y la política de privacidad de la empresa.</label>
</div>
<div>
<input type="submit" name="envio" id="enviar" value="Enviar">
<input type="reset" name="borrar" id="borrar" value="Borrar">
</div>
</fieldset>
</form>
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

Ayuda con un ejercicio de javascript, por favor

Publicado por Ivan (118 intervenciones) el 24/06/2022 18:36:51
Hola,

he adaptado tu código para hacerlo funcionar en una simple página HTML.
He añadido un ID en el select para obtenerlo con JavaScript, he acotado los valores del plazo (1 a 5) y también he añadido un evento onchange="calcularPresupuesto()" en el fieldset de los campos del presupuesto.

De esta forma al cambiar algún dato en ese grupo se ejecuta la función calcularPresupuesto() y muestra el resultado en el campo "container", sin apretar ningún botón ;)

Como soy partidario de que se aprende haciendo las cosas, en la función calcularPresupuesto() simplemente enseño cómo obtener los datos que están actualmente seleccionados del formulario, te dejo a tí hacer las operaciones matemáticas con esos datos ;)

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Calcular presupuesto</title>
  <script>
    function calcularPresupuesto() {
      var categoria = document.getElementById("categoria").value;
      var plazo = document.getElementById("plazo").value;
      var extra1 = document.getElementById("extra1").checked;
      var extra2 = document.getElementById("extra2").checked;
      var extra3 = document.getElementById("extra3").checked;
      var presupuesto = document.getElementById("container");
      presupuesto.value = categoria + ', ' + plazo + ', ' + extra1 + ', ' + extra2 + ', ' + extra3;
    }
  </script>
</head>
 
<body>
    <h1>Calcular presupuesto</h1>
    <p>Ejemplo de cómo obtener datos de formulario con el evento onchange()</p>
 
    <form class="formulario-presupuesto" name="formulario" id="formulario" method="post" action="procesar.php">
      <fieldset>
      <legend>Datos</legend>
      <div class="formularioitems">
      <label for="nombre">Nombre:</label>
      <input type="text" name="nombre" id="nombre" placeholder="Nombre" required>
      </div>
      <div class="formularioitems">
      <label for="apellidos">Apellidos:</label>
      <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" required>
      </div>
      <div class="formularioitems">
      <label for="telefono">Teléfono de contacto:</label>
      <input type="tel" name="telefono" id="telefono" placeholder="Teléfono" required>
      </div>
      <div class="formularioitems">
      <label for="email">Email:</label>
      <input type="email" name="email" id="email" placeholder="Email" required>
      </div>
      </fieldset><br>
 
      <fieldset onchange="calcularPresupuesto()">
      <legend>Presupuesto</legend>
      <div class="formularioitems">
      <label for="productos">Productos:</label>
      <select id="categoria" name="selecion" size="1">
      <option value="vacio">Seleccione categoria</option>
      <option value="diseñopaginaweb">Diseño de página web</option>
      <option value="desarrollodeapps">Desarrollo de apps</option>
      <option value="posicionamiento">Posicionamiento SEO/SEM</option>
      </select>
      </div>
      <div class="formularioitems">
      <label for="plazo">Plazo (en meses):</label>
      <input type="number" name="plazo" id="plazo" min="1" max="5">
      </div>
      <div class="formularioitems">
      <p>Elija los extras para el producto:</p><br>
      <label for="extra1">Tienda online</label>
      <input type="checkbox" name="extra1" id="extra1">
      <label for="extra2">Diseño gráfico</label>
      <input type="checkbox" name="extra2" id="extra2">
      <label for="extra2">Redes sociales</label>
      <input type="checkbox" name="extra3" id="extra3">
      </div>
      <div class="formularioitems">
      <label for="presupuesto">Presupuesto</label>
      <input size="50" type="text" name="presupuesto" id="container" readonly>
      </div>
      </fieldset><br>
 
      <fieldset>
      <legend>Aceptación de los términos y las condiciones de privacidad</legend>
      <div class="formulariocheck">
      <input type="checkbox" name="chterminos" id="chterminos" required>
      <label for="chterminos">Acepto los términos y condiciones y la política de privacidad de la empresa.</label>
      </div>
      <div>
      <input type="submit" name="envio" id="enviar" value="Enviar">
      <input type="reset" name="borrar" id="borrar" value="Borrar">
      </div>
      </fieldset>
      </form>
</body>
</html>

Espero que te sirva.

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
sin imagen de perfil

Ayuda con un ejercicio de javascript, por favor

Publicado por Pablo (4 intervenciones) el 29/06/2022 19:56:54
Buenas tardes Ivan, lo primero muchas gracias por responderme, pero lo estuve intentando y no me va :( me podrias ayudar un cachin mas, llevo unos días de esa forma, pero ni muestra ni me hace los cálculos
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 Ivan

Ayuda con un ejercicio de javascript, por favor

Publicado por Ivan (118 intervenciones) el 29/06/2022 22:47:44
Hola,

el código tal cual está, es una página HTML que funciona por sí sola, si no te va, puede que tengas algún problema con tu navegador (javascript deshabilitado?)

Cada vez que seleccionas un item del presupuesto del formulario, se visualiza el valor de las variables en el campo "Presupuesto".
El valor de las variables simplemente es lo que devuelve el form, tú debes crear el código con if/else, etc. para crear el presupuesto segun los valores que contengan esas variables.

Un checked devolverá true/false dependiendo de si está activado, creas un if/else y le das un valor.

Como dije, se aprende haciéndolo, no voy a resolverlo yo todo.

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
sin imagen de perfil

Ayuda con un ejercicio de javascript, por favor

Publicado por Pablo (4 intervenciones) el 05/07/2022 17:11:53
Buenas tardes Ivan, estuve intentandolo, te explico:

- Select, al tener valor en el formulario me lo hace solo (esta bien haciendo asi)

- Luego en el numerico, solo pude con if anidado, si pongo else al final me da error en la consola, tampoco lo pude poner en negativo para el descuento.

- Los checkeds los hice como muestro, estan bien ?

Tengo otro problema, puse parseInt y todo para ponerlo en entero, pero no suman ni restan, es como si fueran strings o cadenas de textos

estuve mirando e intentando pero no muy bien por donde tirar.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
 
            function calcularPresupuesto() {
            var categoria = document.getElementById("categoria").value;
            var plazo = document.getElementById("plazo").value;
            var extra1 = document.getElementById("extra1").checked;
            var extra2 = document.getElementById("extra2").checked;
            var extra3 = document.getElementById("extra3").checked;
            var presupuesto = document.getElementById("container");
 
 
            // Input numerico (descuento)
            if (plazo == 1) {
                plazo = 100;
            } if (plazo == 2) {
                plazo = 200;
            } if (plazo == 3) {
                plazo = 300;
            } if (plazo == 4) {
                plazo = 400;
            } if (plazo == 5) {
                plazo = 500;
            }
 
            // Chekecks
 
            if (document.getElementById("extra1").checked==true){
                extra1 = 100;
            } else {
                extra1 = 0;
            }
 
            if (document.getElementById("extra2").checked==true) {
                extra2 = 200;
            } else {
                extra2 = 0;
            }
 
            if (document.getElementById("extra3").checked==true) {
                extra3 = 300;
            } else {
                extra3 = 0;
            }
 
 
 
            presupuesto.value = parseInt(categoria + plazo  + extra1  + extra2  + extra3);
            }
            </script>
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 Ivan

Ayuda con un ejercicio de javascript, por favor

Publicado por Ivan (118 intervenciones) el 05/07/2022 18:20:19
Hola,

está bastante bién la idea general, pero hay detalles que si no los sabes cuestan de pillar, te explico:

parseInt se usa para obtener un valor del formulario como un número, en caso contrario, aunque pongas type=number, JavaScript lo pilla como texto y no puedes operar con él.

Los checked no hace falta compararlos con true, su valor ya es true/false.
Si defines las variables con un valor por defecto, como 0, no hace falta luego asignarlo de nuevo.
Lo del plazo negativo, no lo acabo de entender, por un lado son los meses (1 a 5) si quieres asignarle un valor negativo se hace sin problemas

Cuando tienes varios valores puedes hacer varios if, pero yo personalmente prefiero un switch (aunque sea mas lento), porque se lee mejor el código.

Dicho todo esto te pongo el código revisado a mi gusto y en el plazo 5 pongo el valor -100 para que veas un ejemplo negativo.
En el presupuesto pongo tanto el valor numérico como el desglose de los datos, como puedes ver, JavaScript es muy flexible pasando los números a textos, pero de texto a números es más puñetero.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    function calcularPresupuesto() {
      var plazo = 0, extra1 = 0, extra2 = 0, extra3 = 0;
      var plazo = parseInt(document.getElementById("plazo").value);
      var categoria = document.getElementById("categoria").value;
      var presupuesto = document.getElementById("container");
 
      // Input numerico (descuento)
      switch (plazo) {
        case  1 : plazo = 100; break;
        case  2 : plazo = 200; break;
        case  3 : plazo = 300; break
        case  4 : plazo = 400; break;
        case  5 : plazo = -100; break;
        default : plazo = 0;
      }
 
      // Chekecks
      if (document.getElementById("extra1").checked) extra1 = 100;
      if (document.getElementById("extra2").checked) extra2 = 200;
      if (document.getElementById("extra3").checked) extra3 = 300;
      presupuesto.value = categoria + ' Presupuesto: ' + (plazo  + extra1  + extra2  + extra3) + ' Valores form: ' + plazo + ', ' + extra1 + ', ' + extra2 + ', ' + extra3;
    }
  </script>
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
sin imagen de perfil

Ayuda con un ejercicio de javascript, por favor

Publicado por Pablo (4 intervenciones) el 06/07/2022 00:09:29
Muchas gracias Ivan, tuve que hacer un par de modificaciones porque sino no me lo calculaba todo junto, me ponia los selets por separado del resto.

Arriba en donde se coge el input de categoria tuve que ponerle un parseint, para luego en el final poder unirlo todo.

Quedo así, ahora me calcula todo como si fuera en una calculadora en el recuadro, muchas gracias por la ayuda, estoy muy agradecido :)

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
<script>
                function calcularPresupuesto() {
                  var plazo = 0, extra1 = 0, extra2 = 0, extra3 = 0;
                  var plazo = parseInt(document.getElementById("plazo").value);
                  var categoria = parseInt(document.getElementById("categoria").value); // Selects (productos iniciales)
                  var presupuesto = document.getElementById("container");
 
 
                  // Input numerico (descuento)
                  switch (plazo) {
                    case  1 : plazo = -100; break;
                    case  2 : plazo = -200; break;
                    case  3 : plazo = -300; break;
                    case  4 : plazo = -400; break;
                    case  5 : plazo = -500; break;
                    default : plazo = 0;
                  }
 
                  // Chekecks (aumento)
                  if (document.getElementById("extra1").checked) extra1 = 100;
                  if (document.getElementById("extra2").checked) extra2 = 200;
                  if (document.getElementById("extra3").checked) extra3 = 300;
 
                  presupuesto.value = categoria + plazo  + extra1  + extra2  + extra3;
 
                }
              </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Ivan

Ayuda con un ejercicio de javascript, por favor

Publicado por Ivan (118 intervenciones) el 06/07/2022 09:15:17
Perfecto!

Enhorabuena ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar