Dudas con divs
Publicado por Pablo (6 intervenciones) el 04/08/2020 11:44:16
Estimados,
Tengo una duda, porque el problema en realidad lo he resuelto.
Se trata de un formulario de contacto, del que pido solo el email.
Al pulsar enviar, abro el resto del formulario y ya solicito algunos datos más como el nombre y los apellidos, el móvil, etc.
Para ocultar los campos que no son email, al cargar el documento oculto dos div's dónde tengo los campos: dark1 y dark2
El caso es que si a las divs que quiero ocultar las llamo igual (dark, por ejemplo), solo me oculta una, la otra no.
Mi pregunta es, ¿Existe alguna forma de llamar a todas las div's que quiera que ejecuten las mismas acciones de la misma manera?
Ahora solo son dos, pero si necesitara hacerlo con más divs, tendría que hacer dos líneas de código por cada una, y el mantenimiento se podría complicar.
Tengo una duda, porque el problema en realidad lo he resuelto.
Se trata de un formulario de contacto, del que pido solo el email.
Al pulsar enviar, abro el resto del formulario y ya solicito algunos datos más como el nombre y los apellidos, el móvil, etc.
Para ocultar los campos que no son email, al cargar el documento oculto dos div's dónde tengo los campos: dark1 y dark2
El caso es que si a las divs que quiero ocultar las llamo igual (dark, por ejemplo), solo me oculta una, la otra no.
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
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags --><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Efectos de formulario</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-10">
<form class="myform" action="index.html" method="post">
<div class="dark" id="dark1">
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" class="form-control" value="" required>
</div>
<div class="form-group">
<label for="apellidos">Apellicos</label>
<input type="text" name="apellidos" id="apellidos" class="form-control" value="" required>
</div>
</div>
<div class="light" id="light">
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" value="" required>
</div>
<div class="form-group">
<button type="button" name="button1" id="button1" class="btn btn-primary">Entrar</button>
</div>
</div>
<div class="dark" id="dark2">
<div class="form-group">
<label for="movil">Teléfono Móvil</label>
<input type="text" name="movil" id="movil" class="form-control" value="" required>
</div>
<div class="form-group">
<label for="compañia">Compañia</label>
<input type="text" name="compañia" id="compañia" class="form-control" style="text-transform:uppercase;" value="">
</div>
<div class="form-group">
<label for="ciudad">Ciudad</label>
<input type="text" name="ciudad" id="ciudad" class="form-control" value="">
</div>
<div class="form-group">
<label for="provincia">Provincia</label>
<input type="text" name="provincia" id="provincia" class="form-control" value="">
</div>
<div class="form-group">
<button type="submit" name="button2" id="button2" class="btn btn-success">Enviar datos!</button>
<button type="reset" name="button3" id="button3" class="btn btn-danger">Limpiar formulario</button>
</div>
</div>
</form>
</div>
<div class="col-1"></div>
</div>
</div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
let doc = $(document).ready(inicializarFormulario);
function inicializarFormulario(){
let campos1 = $("#dark1").hide();
let campos2 = $("#dark2").hide();
let boton = $("#button1").click(pulsarBoton1);
}function pulsarBoton1(){
$campoEmail = $("#email").val();
if($campoEmail.length <= 0 ){
//No hagas nada.}else{
let campos1 = $("#dark1").show();
let campos2 = $("#dark2").show();
let boton = $("#button1").hide();
} }</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Mi pregunta es, ¿Existe alguna forma de llamar a todas las div's que quiera que ejecuten las mismas acciones de la misma manera?
Ahora solo son dos, pero si necesitara hacerlo con más divs, tendría que hacer dos líneas de código por cada una, y el mantenimiento se podría complicar.
Valora esta pregunta
0
