I find myself making a registration form but I encounter a problem, what happens is that when I start the form it shows me the fields "CECO", "ADDRESS", "LEADER". Which shouldn't be that way, what I'm looking for is that when I start it only shows me "user" and "password" and if I select a role, then it shows me the other fields. Another problem that I find is in the button since having a label <a>only takes me the button if I select it in "return", if I select in the area of the button (not in the text) it does not take it. Any help is very welcome. Thank you
I attach the code of the form along with the script used:
function comprobar(){
var etiqueta = document.getElementById('datos');
var source = document.getElementById('rol');
if(source.selectedIndex >=1)
{
etiqueta.style.display = 'block';
}
else
{
etiqueta.style.display = 'none';
$('#datos').removeAttr('style');
$('#datos').hide();
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="{{ asset('/css/styleRegister.css') }}" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Script para mostrar campos dependiendo de elección select-->
</head>
<body>
<section class="register-block">
<div class="container">
<div class="row">
<div class="col-md-4 register-sec">
<h2 class="text-center">Registro</h2>
<form class="register-form" method="POST" action="{{ route('registro') }}" >
<div class="form-group">
<label>Usuario</label>
<input type="text" class="form-control" name="usuario" placeholder="Ingrese el usuario">
</div>
<div class="form-group">
<label>Contraseña</label>
<input type="password" name="password" class="form-control" placeholder="Ingrese la contraseña">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1" onclick="comprobar()">Seleccione el Rol
<select class="form-control" id="rol" name="rol" required >
<option>----</option>
<option >Lab Metrología</option>
<option >Lab Aguas y Suelos</option>
<option >Lab Catálisis</option>
<option >Lab Análisis petrofísicos</option>
<option >Lab CEMIM</option>
<option >Lab CIT</option>
<option >Lab Biotecnología</option>
<option >Lab Cromatografía</option>
<option >Lab Crudos</option>
<option >Lab Daños a la Formación</option>
<option >Lab Espectroscopía</option>
<option >Lab Fenómenos Interfaciales y Reología</option>
<option >Lab Geoquímica</option>
<option >Lab Materiales</option>
<option >Lab Mecánica de Rocas</option>
<option >Lab Motores</option>
<option >Lab Procesamiento Geológico</option>
<option >Lab PVT</option>
<option >Lab Química de Producción</option>
<option >Lab Recobro Mejorado</option>
<option >Litóteca</option>
<option >Mantenimiento</option>
<option >Plantas Piloto</option>
<option>admin</option>
</select>
</label>
<p id="datos" >
<label>
<label>CECO</label>
<input type="text" class="form-control" name="ceco" placeholder="Ingrese el codigo ceco">
<label>Direccion</label>
<input type="text" class="form-control" name="direccion" placeholder="Ingrese la dirección">
<label>Lider</label>
<input type="text" class="form-control" name="lider" placeholder="Ingrese el nombre del lider">
</label>
</p>
</div>
</form>
</div>
<div class="col-md-8 banner-sec">
</div>
</div>
</div>
</section>
</body>
</html>
<!------ Include the above in your HEAD tag ---------->Thanks.
Basically the function check is called when the script is loaded, and the problem with the button would only be to invert the labels so that the label
acovers the button.