Tenemos la página de Apertura de Historias, en la cual se puede apreciar la fase1 del registro que vendrían siendo los datos personales.
document.querySelector("form").reset();
$("input[name='sex']").change(function(){
if( $(this).val()== "H")
document.getElementById('bann').src = "../img/banner.png";
if( $(this).val()== "F")
document.getElementById('bann').src = "../img/banner2.png";
$("footer").attr("enabled", $(this).val() == "F").toggleClass("bg-girl");
$("h2.f1").attr("enabled", $(this).val() == "F").html("Identificación de la Paciente");
if( $(this).val()== "H")
$("h2.f1").html("Identificación del Paciente");
});
$(document).ready(function() {
//Validación Fase 1 de Registro
$(":text").keyup(function() {
$(":text").each(function () {
if($(this).val() == '') {
$("#sbt1").attr("disabled","disabled");
}
else {
$("#sbt1").removeAttr("disabled");
}
});
});
})
$(".boxuno").on( 'change', function() {
if( $(this).is(':checked') ) {
//Validación Fase 2 de Registro
$("#sbt2").removeAttr("disabled");
}
else {
$("#sbt2").attr("disabled","disabled");
}
});
$(".boxdos").on( 'change', function() {
if( $(this).is(':checked') ) {
//Validación Fase 3 de Registro
$("#sbt3").removeAttr("disabled");
}
else {
$("#sbt3").attr("disabled","disabled");
}
});
$(document).ready(function(){
$('.siguiente').click(function(){
var current = $(this).parent();
var next = $(this).parent().next();
$(".progress li").eq($("fieldset").index(next)).addClass("active");
current.hide();
next.show();
})
$('.atras').click(function(){
var current = $(this).parent();
var prev = $(this).parent().prev()
$(".progress li").eq($("fieldset").index(current)).removeClass("active");
current.hide();
prev.show();
})
})
$(window).load(function(){
$(function() {
$('#diagram').change(function(e) {
addImage(e);
});
function addImage(e){
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
}
function fileOnload(e) {
var result=e.target.result;
$('#odontodiagram').attr("src",result);
}
});
});
@font-face
{
font-family: 'Amaranth';
font-style: normal;
font-weight: 400;
src: local('Amaranth Regular'), local('Amaranth-Regular'), url(../font/Amaranth.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face
{
font-family: 'Merienda';
font-style: normal;
font-weight: 400;
src: local('Merienda'), local('Merienda-Regular_0_wt'), url(../font/Merienda.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body
{
margin: 0;
}
header img
{/*Banner Inicio*/
width: 100% !important;
}/*Banner Fin*/
h1
{/*Titulo de Página Inicio*/
font-family: 'Merienda', cursive;
text-align: center;
}/*Titulo de Página Fin*/
h2
{/*Titulo de Página Inicio*/
color: black;
font-family: 'Merienda', cursive;
margin-bottom: 5%;
text-align: center;
}/*Titulo de Página Fin*/
/*MENU PRINCIPAL ODONTOLOGIA INICIO*/
nav
{
width: 100% !important;
}
nav ul
{
align-items: center;
display: flex;
justify-content: space-between;
list-style: none;
padding: 0.5rem 1rem;
}
nav ul li
{
margin-left: 3.5%;
margin-right: 3.5%;
}
nav ul li a
{
display: inline-block;
line-height:100% !important;
text-align: center;
text-decoration: none;
}
nav ul li a:hover
{
background-color: #1c5b99;
border-radius: 50%;
color: white;
font-family: 'Amaranth', sans-serif;
}
/*MENU PRINCIPAL ODONTOLOGIA FIN*/
a:visited,a:link
{/*Enlaces Inicio*/
color: black;
}/*Enlaces Fin*/
footer
{/*Pié de Página*/
background-color: #1c5b99;
color: white;
font-family: 'Amaranth';
text-align: center;
}/*Pié de Página*/
form
{
margin-left: 5%;
margin-right: 5%;
}
fieldset
{/*Marco de la Tabla*/
background-color: #DCF9E4;
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
width: 95%;
}/*Marco de la Tabla*/
fieldset:not(:first-of-type)
{
display:none;
}
legend
{/*Título de la Tabla*/
background-color: #DCF9E4;
border-top-right-radius: 0.25rem !important;
color: black;
margin-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
text-align: center;
}/*Título de la Tabla*/
table
{
caption-side: top;
margin: 0 0 1em 0;
width: 100%;
}
/*MODIFICACIONES NECESARIAS PARA LA CAPTURA DE DATOS*/
label
{
font-family: 'Amaranth', sans-serif;
color: black;
text-transform: capitalize; /* Títulos para los Antecedentes*/
}
input[type=text]
{
color: black;
text-transform: capitalize; /* Transformación de Texto*/
}
input[type=number]
{
appearance: textfield;
-moz-appearance: textfield;
}
input#email, input#telefono
{
text-transform: none; /* Sin Transformación de Texto en el campo email*/
}
.titulo
{/*Botones Principales Inicio*/
background-color: white;
border: none;
font-family: 'Merienda', cursive;
width:100%;
}/*Bones Principales Fin*/
div.campo
{
color: black;
margin-left: 25%;
margin-right: 25%; /* Datos Identificación del Paciente*/
}
.at1
{
width: 23%;
}
.at2
{
width: 40%;
}
.at3
{
width: 20%;
}
.tboxuno{
float: right;
margin-right: 15%;
}
.tboxdos{
float: right;
margin-right: 15%;
}
.tr1
{
width: 30%;
}
.tr2
{
width: 40%;
}
#identificacion,#carne,#nombre,#apellido,#telefono,#email,#domicilio
{/* Identificación del Paciente*/
text-align: center;
}/* Campo Tel del Paciente*/
/*MODIFICACIONES NECESARIAS PARA LA CAPTURA DE DATOS*/
#cls
{/*FIELDSET CONSULTA PACIENTE*/
margin-left:15%;
width: 70%;
}/*FIELDSET CONSULTA PACIENTE*/
.boton1
{ /* Boton de Guardado*/
background-color: #28a745;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right: 1.8%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}/* Boton de Guardado*/
.boton2
{ /* Boton de Limpieza*/
background-color: #6c757d;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right:1.8%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}/* Boton de Limpieza*/
.boton3
{ /* Boton de Busqueda*/
background-color:#17a2b8;
margin-left: 25%;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}/* Boton de Busqueda*/
#boton4
{ /* Boton de Modificaciones*/
background-color: #28a745;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right: 12%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}/* Boton de Modificaciones*/
#boton5
{ /* Boton de Eliminacion*/
background-color:#dc3545;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: right;
margin-top: 1%;
margin-right:1.8%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
} /* Boton de Eliminacion*/
#boton6
{ /* Boton de Reporte*/
background-color: #20c997;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
float: left;
margin-top: 1%;
margin-left: 15%;
padding: 0.375rem 0.75rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}/* Boton de Reporte*/
#pie:visited,#pie:link,#pie{
color: white;
text-decoration: none;
}
.bg-girl
{/*SEXO FEMENINO*/
background-color: #dc3545;
}/*SEXO FEMENINO*/
.tcampo
{/* Títulos para los Antecedentes Del Paciente*/
color:black;
font-style: italic;
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}/* Títulos para los Antecedentes Del Paciente*/
.saltos
{
margin-top: 10px;
}
.siguiente,.atras{
background-color: #27ae60;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #fff;
padding: 0.4rem 0.5rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.siguiente{
float: right;
}
.siguiente:hover, .atras:hover{
box-shadow:0 0 0 2px #fff, 0 0 0 4px #27ae60;
}
/*Progressbar*/
ul.progress{
margin-left: 0;
}
.progress {
margin-bottom: 4%;
margin-top: 4%;
overflow: hidden;
counter-reset: step;
text-align: center;
}
.progress li {
list-style-type: none;
color: #000;
text-transform: capitalize;
font-size: 12px;
width: 33%;
margin-left:-1.1%;
float: left;
position: relative;
}
.progress li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
.progress li:after {
content: '';
width: 100%;
height: 2px;
background: #fff;
position: absolute;
left: -50%;
top: 9px;
z-index:-1; /*put it behind the numbers*/
}
.progress li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progress li.active:before, .progress li.active:after{
background: #27AE60;
color: white;
}
#pie:visited,#pie:link,#pie{
color: white;
text-decoration: none;
}
@media screen and (width: 1024px) and (height: 420px){ /* 1024 * 600 Ventana*/
header img{ max-height: 76px; }
h1{ margin-top: 4%; margin-bottom: 0%; }
nav ul li a{ font-size:15px; height: 50px; padding-top: 15px; }
footer{ height: 61px; padding-top: 15px; margin-top: 4.1%;}
button.titulo{ font-size: 33px; margin-bottom: 0%; margin-top: 2.15%; }
div.campo,.tboxuno,.tboxdos,label{ font-size: 14px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" content="width=device-width, no initial-scale=1.0">
<title>Nuevo Registro</title>
</head>
<body>
<form>
<!--Progressbar-->
<ul class='progress'>
<li class="active">Identificación del Paciente</li>
<li>Antecedentes Personales</li>
<li>Tratamientos Realizados</li>
</ul>
<fieldset>
<h2 class="f1">Identificación del Paciente</h2>
<table>
<td>
<div class="campo">
<label><input type="text" id="identificacion" autocomplete="off" onblur="CI()" required>Cédula</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="nombre" autocomplete="off" required > Nombres</label>
</div>
</td>
<td>
<div class="campo">
<label ><input type="text" id="telefono" autocomplete="off" required> Teléfono</label>
</div>
</td>
<tr class="saltos"></tr>
<td>
<div class="campo">
<label><input type="text" id="carne" autocomplete="off" required> Carné</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="apellido" autocomplete="off" required> Apellidos</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="email" autocomplete="off" required> Correo</label>
</div>
</td>
<tr></tr>
<td>
<div class="campo">
<label> <input id="date" type="date" required><br> Fecha de Nacimiento</label>
</div>
</td>
<td>
<div style="margin-left:25%;">
<input type="radio" name="sex" value="H" checked><label> Hombre</label>
<input type="radio" name="sex" value="F"><label> Mujer</label>
</div>
</td>
<td>
<div class="campo">
<label><input type="text" id="domicilio" autocomplete="off" required> Dirección</label>
</div>
</td>
</table>
<input type='button' id="sbt1" class="siguiente" value="Siguiente" disabled>
</fieldset>
<fieldset>
<h2>Antecedentes Personales</h2>
<table>
<td>
<div class="tcampo"> Tratamientos: </div>
</td>
<td>
<div class="tcampo" style="float:right; "> Padecimientos: </div>
</td>
<td></td>
<td>
<div class="tcampo" style="float:left; "> Alergias: </div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Embarazo
<input type="checkbox" class="boxuno" name="t1">
</div>
</td>
<td class="at">
<div class="tboxuno">Discapacidad
<input type="checkbox" class="boxuno" name="p1">
</div>
</td>
<td class="at">
<div class="tboxuno"> Asma
<input type="checkbox" class="boxuno" name="p2">
</div>
</td>
<td class="at">
<div class="tboxuno"> Aspirina
<input type="checkbox" class="boxuno" name="a1" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Consultas Médicas
<input type="checkbox" class="boxuno" name="t2" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Ulcera Gástrica
<input type="checkbox" class="boxuno" name="p3" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Anemía
<input type="checkbox" class="boxuno" name="p4" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Penicilina
<input type="checkbox" class="boxuno" name="a2" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Consumo de Tabaco
<input type="checkbox" class="boxuno" name="t3" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Fiebre Reumática
<input type="checkbox" class="boxuno" name="p5" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Tíroides
<input type="checkbox" class="boxuno" name="p6" >
</div>
</td>
<td class="at">
<div class="tboxuno">Anestesia
<input type="checkbox" class="boxuno" name="a3" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Transfusión Sanguínea
<input type="checkbox" class="boxuno" name="t4" >
</div>
</td>
<td class="at">
<div class="tboxuno">Respiración Bucal
<input type="checkbox" class="boxuno" name="p7" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Diabetes
<input type="checkbox" class="boxuno" name="p8" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Iodo
<input type="checkbox" class="boxuno" name="a4" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Intervención Quirúrgica
<input type="checkbox" class="boxuno" name="t5" >
</div>
</td>
<td class="at">
<div class="tboxuno">Defícit de Vitamina K
<input type="checkbox" class="boxuno" name="p9" >
</div>
</td>
<td class="at">
<div class="tboxuno">Hepatitís
<input type="checkbox" class="boxuno" name="p10" >
</div>
</td>
<td class="at">
<div class="tboxuno"> Otros
<input type="checkbox" class="boxuno" name="a5" >
</div>
</td>
<tr></tr>
<td class="at">
<div class="tboxuno">Consumo de Pastillas A.C
<input type="checkbox" class="boxuno" name="t6" >
</div>
</td>
<td class="at">
<div class="tboxuno">Apretamiento Dentario
<input type="checkbox" class="boxuno" name="p11" >
</div>
</td>
<td class="at">
<div class="tboxuno">Leucemía
<input type="checkbox" class="boxuno" name="p12" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Problemas del Corazón
<input type="checkbox" class="boxuno" name="p13" >
</div>
</td>
<td class="at">
<div class="tboxuno">Hemofilia
<input type="checkbox" class="boxuno" name="p14" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Enfermedades Venéreas
<input type="checkbox" class="boxuno" name="p15" >
</div>
</td>
<td>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno"> Herpes o Aftas frecuentes
<input type="checkbox" class="boxuno" name="p16" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Ruidos al abrir/cerrar boca
<input type="checkbox" class="boxuno" name="p17" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Lim. para abrir/cerrar boca
<input type="checkbox" class="boxuno" name="p18" >
</div>
</td>
<td>
</td>
<tr></tr>
<td>
</td>
<td class="at">
<div class="tboxuno">Sangrado Excesivo al Cortarse
<input type="checkbox" class="boxuno" name="p19" >
</div>
</td>
<td>
</td>
</table>
<input type='button' id="sbt2" class='siguiente' value="Siguiente" disabled>
<input type='button' class='atras' value="Atrás">
</fieldset>
<fieldset>
<h2>Tratamientos Realizados</h2>
<table>
<td class="tr1">
<div class="tboxdos">Rayos X
<input type="checkbox" class="boxdos" name="tt1" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Control
<input type="checkbox" class="boxdos" name="tt2" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Momificaciones
<input type="checkbox" class="boxdos" name="tt3" >
</div>
</td>
<tr></tr>
<td class="tr1">
<div class="tboxdos">Profilaxis
<input type="checkbox" class="boxdos" name="tt4" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Cirujia Dental
<input type="checkbox" class="boxdos" name="tt5" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Topoficación de Flúor
<input type="checkbox" class="boxdos" name="tt6" >
</div>
</td>
<tr></tr>
<td class="tr1">
<div class="tboxdos">Tratectomia
<input type="checkbox" class="boxdos" name="tt7" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Raspado y Alisado
<input type="checkbox" class="boxdos" name="tt8" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Sellantes de Fosas y Fisuras
<input type="checkbox" class="boxdos" name="tt9" >
</div>
</td>
<tr></tr>
<td class="tr1">
<div class="tboxdos">Emergencias
<input type="checkbox" class="boxdos" name="tt10" >
</div>
</td>
<td class="tr1">
<div class="tboxdos">Operatorias Dental
<input type="checkbox" class="boxdos" name="tt11" >
</div>
</td>
<td class="tr2">
<div class="tboxdos">Administración de Medicamentos
<input type="checkbox" class="boxdos" name="tt12" >
</div>
</td>
</table>
<input type='button' class="atras" value="Atrás">
<input type='submit' id="sbt3" class="siguiente" value="Guardar" disabled>
</fieldset>
</form >
<footer>
<a id="pie" href="menu">Programa Nacional de Formación en Informática © 2019</a>
</footer>
</body>
</html>
Porfavor necesito agregar otra condición para que el boton siguiente se active de forma correcta, actualmente sí todos los inputs del tipo text no están vacíos el atributo disabled se remueve, pero es necesario también que considere el input date para así avanzar como es debido.
Agrego mi Código, Gracias de Antemano!
if($(this).val() == '' && $('#date').val())===''