"newRequest"
Bootstrap 4.1.1 Snippet by coxyh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script> <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <script src="https://unpkg.com/gijgo@1.9.13/js/messages/messages.es-es.js" type="text/javascript"></script> <header id="header" class=""> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark menu-color"> <div class="container"> <!-- Navbar brand --> <!-- Collapse button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Collapsible content --> <div class="collapse navbar-collapse" id="basicExampleNav"> <!-- Links --> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="home-logged.html">Inicio <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="request-safe-conduct.html">Salvoconducto</a> </li> <li class="nav-item"> <a class="nav-link" href="">Lista de Salvoconducto</a> </li> <li class="nav-item"> <a class="nav-link" href="perfil.html">Perfil</a> </li> <li class="nav-item"> <a class="nav-link" href="">Información</a> </li> </ul> <!-- Links --> <!-- Links --> <form class="form-inline" action="#!"> <div class="md-form my-0"> <a class="white-text cerrar-sesion" type="submit" >Cerrar Seccion</a> </div> </form> </div> <!-- Collapsible content --> </div> </nav> <!--/.Navbar--> <div class="container safe-conduct"> <div class="row"> <div class="col" align="center"> <!-- Card --> <div class="card contenedor-safe-conduct"> <h4 class=" card-header h4 mb-3 barra-titulos white-text">¿NECESITA UN SALVOCONDUCTO?</h4> <p class="titulo-request">Genere su salvoconducto digital</p> <div class="sub-contenido-pre"> <p> Declaración Autorresponsable de Desplazamiento en el marco del estado de alarma por la crisis sanitaria COVID-19. </p> </div> <!-- Card content --> <div class="card-body"> <form class="text-center p-1" action="#!"> <div class="row row-contenedor1"> <div class="cont-subtirulo-safe"> <h4 class=" card-header h4 mb-3 barra-titulos white-text">Usuario Identificado</h4> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div align="left"> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" value="Fancy" readonly class="form-control mb-4" required> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div align="left"> <label for="apellido">Apellidos</label> <input type="text" id="apellido" name="apellido" value="Dancy" readonly class="form-control mb-4" required> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div align="left"> <label for="email">Email</label> <input type="email" id="email" name="email" value="JoaquinCopete@gmail.com" readonly class="form-control mb-4" required> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div align="left"> <label for="dni">DNI / Pasaporte / NIE</label> <input type="text" id="dni" name="dni" value="75.521.256-H" readonly class="form-control mb-4" required> </div> </div> <div class="col-12"> <div align="left"> <label for="direccion">Dirección de Origen</label> <input type="text" id="direccion" name="direccion" value="Calle Ciudadela 10. Las Rozas. Madrid" readonly class="form-control mb-4" required> </div> </div> <div class="col-12"> <div align="left"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="micheckbox" value="" > <label class="form-check-label p-2" for="micheckbox">Usar otra Dirección</label> </div> <input type="text" id="otraDireccion" name="direccion2" value="" class="form-control mb-4"> </div> </div> </div> <!-- row 2 --> <div class="row row-contenedor2"> <div class="cont-subtirulo-safe"> <h4 class=" card-header h4 mb-3 barra-titulos white-text">Datos del Salvoconducto</h4> </div> <div class="col-12"> <div align="left"> <label for="fecha">Fecha de Generación del Salvoconducto </label> </div> </div> <div class="col-4"> <div align="left"> <input type="text" id="fecha" name="fecha" value="04/05/2020" readonly class="form-control mb-4"> </div> </div> <div class="col-12"> <div align="left" class="cont-razon"> <legend>Motivo del Desplazamiento (Marcar el que corresponda)</legend> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="reason1" name="reason"> <label class="custom-control-label" for="reason1">Adquisición de alimentos, productos farmacéuticos y de primera necesidad.</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="reason2" name="reason"> <label class="custom-control-label" for="reason2">Asistencia a centro, servicio o establecimiento sanitario.</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="reason3" name="reason"> <label class="custom-control-label" for="reason3">Desplazamiento desde/hasta el lugar de trabajo para efectuar la prestación laboral, profesional o empresarial. (Indicar empresa).</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="reason4" name="reason"> <label class="custom-control-label" for="reason4">Asistencia o cuidado a mayores, menores, dependientes, personas con discapacidad o personas especialmente vulnerables.</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="reason5" name="reason"> <label class="custom-control-label" for="reason5">Desplazamiento a entidades financieras o de seguros.</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="reason6" name="reason"> <label class="custom-control-label" for="reason6">Dausa de fuerza mayor o situación de necesidad. (Justificar).</label> </div> </div> </div> <div class="col-12"> <div align="left"> <input type="text" id="reason" name="reason" value="" placeholder=" “Introduce otras causas, empresa, comercio al que va, o cualquier comentario que considere“ " class="form-control mb-4"> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div align="left"> <label for="fecha-desplazamiento">Fecha del Desplazamiento</label> <input class="form-control" value="" id="fecha-desplazamiento" name="fecha-desplazamiento" required --> <script> var datepicker, config; config = { locale: 'es-es', uiLibrary: 'bootstrap4' }; //$('#fecha-desplazamiento').datepicker(); datepicker = $('#fecha-desplazamiento').datepicker(config); </script> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div align="left"> <label for="hora-salida">Hora de Salida</label> <input class="form-control" type="text" value="" id="hora-salida" placeholder="00:00" name="hora-salida" required> <script> $('#hora-salida').timepicker({ uiLibrary: 'bootstrap4' }); </script> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div align="left"> <label for="hora-llegada">Hora de Llegada</label> <input class="form-control" type="text" value="" placeholder="00:00" id="hora-llegada" name="hora-llegada" required> <script> $('#hora-llegada').timepicker({ uiLibrary: 'bootstrap4' }); </script> </div> </div> <div class="col-12 mt-4"> <div align="left"> <label for="direccion-destino">Dirección de Destino</label> <input type="text" id="direccion-destino" name="direccion-destino" value="" class="form-control mb-4" required> <select id="busqueda_provincia"> <option value='alava'>Álava</option> <option value='albacete'>Albacete</option> <option value='alicante'>Alicante/Alacant</option> <option value='almeria'>Almería</option> <option value='asturias'>Asturias</option> <option value='avila'>Ávila</option> <option value='badajoz'>Badajoz</option> <option value='barcelona'>Barcelona</option> <option value='burgos'>Burgos</option> <option value='caceres'>Cáceres</option> <option value='cadiz'>Cádiz</option> <option value='cantabria'>Cantabria</option> <option value='castellon'>Castellón/Castelló</option> <option value='ceuta'>Ceuta</option> <option value='ciudadreal'>Ciudad Real</option> <option value='cordoba'>Córdoba</option> <option value='cuenca'>Cuenca</option> <option value='girona'>Girona</option> <option value='laspalmas'>Las Palmas</option> <option value='granada'>Granada</option> <option value='guadalajara'>Guadalajara</option> <option value='guipuzcoa'>Guipúzcoa</option> <option value='huelva'>Huelva</option> <option value='huesca'>Huesca</option> <option value='illesbalears'>Illes Balears</option> <option value='jaen'>Jaén</option> <option value='acoruña'>A Coruña</option> <option value='larioja'>La Rioja</option> <option value='leon'>León</option> <option value='lleida'>Lleida</option> <option value='lugo'>Lugo</option> <option value='madrid'>Madrid</option> <option value='malaga'>Málaga</option> <option value='melilla'>Melilla</option> <option value='murcia'>Murcia</option> <option value='navarra'>Navarra</option> <option value='ourense'>Ourense</option> <option value='palencia'>Palencia</option> <option value='pontevedra'>Pontevedra</option> <option value='salamanca'>Salamanca</option> <option value='segovia'>Segovia</option> <option value='sevilla'>Sevilla</option> <option value='soria'>Soria</option> <option value='tarragona'>Tarragona</option> <option value='santacruztenerife'>Santa Cruz de Tenerife</option> <option value='teruel'>Teruel</option> <option value='toledo'>Toledo</option> <option value='valencia'>Valencia/Valéncia</option> <option value='valladolid'>Valladolid</option> <option value='vizcaya'>Vizcaya</option> <option value='zamora'>Zamora</option> <option value='zaragoza'>Zaragoza</option> </select> </div> </div> <div class="col-12"> <div align="left"> <label for="distancia">Distancia aproximada entre la dirección de Origen y la de Destino:</label> <input type="text" id="distancia" name="distancia" value="" class="form-control mb-4" placeholder=" 3 kilómetros" required> </div> <div class="col-12"> <div align="left"> <div class="form-check form-check-inline aliniacion-left"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="" name="" required=""> <label class="form-check-label p-2" for="inlineCheckbox1">Certifico que mi desplazamiento está relacionado con las actividades autorizadas por el artículo 7 del RD 463/2020 y sus posteriores modificaciones.</label> </div> </div> </div> </div> <!-- Sign in button --> <button class="btn boton-safe white-text btn-block my-4" type="submit"><b>GENERAR SALVOCONDUCTO</b></button> </form> </div> </div> <!-- Card --> </div> </div> </div> </header> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.es.min.js"></script> <script > $('#datetimepicker2').datepicker({ weekStart: 0, todayBtn: "linked", language: "es", orientation: "bottom auto", keyboardNavigation: false, autoclose: true }); $('#datetimepicker1').datetimepicker({ format: 'HH:mm' }); </script>
$("#otraDireccion").css("display", "none"); $( '#micheckbox' ).on( 'click', function() { if( $(this).is(':checked') ){ // Hacer algo si el checkbox ha sido seleccionado $("#otraDireccion").css("display", ""); } else { // Hacer algo si el checkbox ha sido deseleccionado $("#otraDireccion").css("display", "none"); } });

Related: See More


Questions / Comments: