formulario condicional en html - pasar a la siguiente "seccion"
Publicado por laura (1 intervención) el 28/11/2023 10:03:09
Buenas, me gustaría crear un formulario en HTML en el que, en un principio, aparezcan dos preguntas con respuestas de tipo radio y un boton "siguiente".
Al hacer click en este botón, desde JS se tiene que comprobar si las respuestas a las dos preguntas cumplen con una condición.
En caso de que esta condición se cumpla, estas dos preguntas y el botón se ocultarán y se mostrará un div con otro formulario. Si no se cumplen, se ocultarán pero se mostrará un div con un mensaje de fin del formulario.
He intentado programarlo, pero al hacer click en siguiente, ni las preguntas iniciales ni el boton se ocultan, y el div que debería mostrarse, aparece en un parpadeo y desaparece.
Alguien podría decirme qué está fallando y cómo puedo arreglarlo? Gracias de antemano :)
Al hacer click en este botón, desde JS se tiene que comprobar si las respuestas a las dos preguntas cumplen con una condición.
En caso de que esta condición se cumpla, estas dos preguntas y el botón se ocultarán y se mostrará un div con otro formulario. Si no se cumplen, se ocultarán pero se mostrará un div con un mensaje de fin del formulario.
He intentado programarlo, pero al hacer click en siguiente, ni las preguntas iniciales ni el boton se ocultan, y el div que debería mostrarse, aparece en un parpadeo y desaparece.
Alguien podría decirme qué está fallando y cómo puedo arreglarlo? Gracias de antemano :)
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
<!DOCTYPE html>
<html lang="es">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id = "form" method="post" name="form-prueba" action="">
<div id="tamaño" style="display: block;">
<p>Para empezar, necesitamos conocer el tamaño de su empresa para saber si se ajusta a los servicios que ofrece A&M</p>
<label for = "empleados"> ¿Cuántos empleados tiene su empresa? </label> <br/>
<input type = "radio" id = "emp-micro" name = "empleados" value = "micro">
<label for = "emp-micro"> Menos de 10 </label> <br/>
<input type = "radio" id = "emp-peq" name = "empleados" value = "peq">
<label for = "emp-peq"> Entre 10 y 49 </label> <br/>
<input type = "radio" id = "emp-med" name = "empleados" value = "med">
<label for = "emp-med"> Entre 50 y 249 </label> <br/>
<input type = "radio" id = "emp-gran" name = "empleados" value = "gran">
<label for = "emp-gran"> 250 o más </label> <br/>
<br/>
<label for = "facturacion"> ¿Cuánto factura su empresa anualmente? </label> <br/>
<input type = "radio" id = "fac-micro" name = "facturacion" value = "micro">
<label for = "fac-micro"> Volumen de facturación o un activo total que no supera los 2 millones de euros. </label> <br/>
<input type = "radio" id = "fac-peq" name = "facturacion" value = "peq">
<label for = "fac-peq"> Volumen de facturación o un activo total que no supera los 10 millones de euros. </label> <br/>
<input type = "radio" id = "fac-med" name = "facturacion" value = "med">
<label for = "fac-med"> Volumen de facturación inferior a 50 millones de euros o un activo total que no supera los 43 millones de euros. </label> <br/>
<input type = "radio" id = "fac-gran" name = "facturacion" value = "gran">
<label for = "fac-gran"> Volumen de facturación superior a 50 millones de euros o un activo total que sobrepasa los 43 millones de euros. </label> <br/>
<br/>
<button id="bot-siguiente" onclick="comprobar()"> Siguiente </button>
</div>
<br>
<div id="preguntas" style="display: none;">
<p>aquí irían las preguntas</p>
</div>
<div id="nocumple" style="display: none;">
<p>no cumple con el formulario</p>
</div>
</form>
<script>
function comprobar() {
// Obtener los valores de los radios seleccionadosvar respuesta1 = $("input[name='empleados']:checked").val();
var respuesta2 = $("input[name='empleados']:checked").val();
// Definir la condición que se debe cumplir // En este caso, que ambas respuestas sean "si"var condicion = respuesta1 == "micro" || respuesta2 == "micro";
// Ocultar las preguntas y el botón$("#tamaño").hide();
// Mostrar el div correspondiente según la condiciónif (condicion) {
document.getElementById("nocumple").style.display = "block";
document.getElementById("tamaño").style.display = "none";
document.getElementById("preguntas").style.display = "none";
} else {
document.getElementById("nocumple").style.display = "none";
document.getElementById("tamaño").style.display = "none";
document.getElementById("preguntas").style.display = "block";
} }</script>
</body>
</html>
Valora esta pregunta
0
