Skip to main content
Corregir errata
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40
$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
        $('#usuario').focus();
    });
    
    $("#cancelar").click(funcitonfunction(){
      $("#usuario, #contrasena").val("");
    });
});
<?php
    session_start();
?>
<!doctype html>
<html lang="en">
<style>
    .fondo {
        background: url("img/02.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }    
    .alto {
        height: 100vh;
    }
</style>
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <!-- <script src="https://kit.fontawesome.com/2215372ade.js" crossorigin="anonymous"></script> -->
</head>
<body>
    <!--PANTALLA INICIAL DEL SISTEMA-->
    <div class="container-fluid fondo">
        <div class="row alto align-items-center justify-content-center text-center text-ligth text-white">
            <div class="col-m-8">
                <div class="display-4">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h1 class="display-4 my-3">SIGED</h1>
                <p class="lead mb-4">Sistema Integrado de Gestión Educacional</p>
                <hr class="bg-light">
                <button type="button" class="btn btn-outline-light mx-2" data-toggle="modal" data-target="#login">Ingresar</button>
            </div>
        </div>
    </div>
    <!-- MODAL LOGIN-->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal modal-dialog-centered" role="document">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h3 class="modal-title display-6" id="exampleModalCenterTitle">Ingreso al sistema</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         
                        <span class="fa-layers fa-fw">
                            <i class="fas fa-circle" style="color:Tomato"></i>
                            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            <form id="login1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Usuario</label>
                                    <input type="text" class="form-control" id="usuario">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Contraseña</label>
                                    <input type="text" class="form-control" id="contrasena">
                                </div>
                                <button class="btn btn-primary mx-4">Aceptar</button>
                                <button type="button" class="btn btn-danger mx-4" data-dismiss="modal" id="cancelar">Cancelar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/logica.js"></script>
</body>
</html>
$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
        $('#usuario').focus();
    });
    
    $("#cancelar").click(funciton(){
      $("#usuario, #contrasena").val("");
    });
})
<?php
    session_start();
?>
<!doctype html>
<html lang="en">
<style>
    .fondo {
        background: url("img/02.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }    
    .alto {
        height: 100vh;
    }
</style>
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <!-- <script src="https://kit.fontawesome.com/2215372ade.js" crossorigin="anonymous"></script> -->
</head>
<body>
    <!--PANTALLA INICIAL DEL SISTEMA-->
    <div class="container-fluid fondo">
        <div class="row alto align-items-center justify-content-center text-center text-ligth text-white">
            <div class="col-m-8">
                <div class="display-4">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h1 class="display-4 my-3">SIGED</h1>
                <p class="lead mb-4">Sistema Integrado de Gestión Educacional</p>
                <hr class="bg-light">
                <button type="button" class="btn btn-outline-light mx-2" data-toggle="modal" data-target="#login">Ingresar</button>
            </div>
        </div>
    </div>
    <!-- MODAL LOGIN-->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal modal-dialog-centered" role="document">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h3 class="modal-title display-6" id="exampleModalCenterTitle">Ingreso al sistema</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         
                        <span class="fa-layers fa-fw">
                            <i class="fas fa-circle" style="color:Tomato"></i>
                            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            <form id="login1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Usuario</label>
                                    <input type="text" class="form-control" id="usuario">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Contraseña</label>
                                    <input type="text" class="form-control" id="contrasena">
                                </div>
                                <button class="btn btn-primary mx-4">Aceptar</button>
                                <button type="button" class="btn btn-danger mx-4" data-dismiss="modal" id="cancelar">Cancelar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/logica.js"></script>
</body>
</html>
$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
        $('#usuario').focus();
    });
    
    $("#cancelar").click(function(){
      $("#usuario, #contrasena").val("");
    });
});
<?php
    session_start();
?>
<!doctype html>
<html lang="en">
<style>
    .fondo {
        background: url("img/02.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }    
    .alto {
        height: 100vh;
    }
</style>
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <!-- <script src="https://kit.fontawesome.com/2215372ade.js" crossorigin="anonymous"></script> -->
</head>
<body>
    <!--PANTALLA INICIAL DEL SISTEMA-->
    <div class="container-fluid fondo">
        <div class="row alto align-items-center justify-content-center text-center text-ligth text-white">
            <div class="col-m-8">
                <div class="display-4">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h1 class="display-4 my-3">SIGED</h1>
                <p class="lead mb-4">Sistema Integrado de Gestión Educacional</p>
                <hr class="bg-light">
                <button type="button" class="btn btn-outline-light mx-2" data-toggle="modal" data-target="#login">Ingresar</button>
            </div>
        </div>
    </div>
    <!-- MODAL LOGIN-->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal modal-dialog-centered" role="document">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h3 class="modal-title display-6" id="exampleModalCenterTitle">Ingreso al sistema</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         
                        <span class="fa-layers fa-fw">
                            <i class="fas fa-circle" style="color:Tomato"></i>
                            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            <form id="login1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Usuario</label>
                                    <input type="text" class="form-control" id="usuario">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Contraseña</label>
                                    <input type="text" class="form-control" id="contrasena">
                                </div>
                                <button class="btn btn-primary mx-4">Aceptar</button>
                                <button type="button" class="btn btn-danger mx-4" data-dismiss="modal" id="cancelar">Cancelar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/logica.js"></script>
</body>
</html>
se añadió 1 carácter en el cuerpo
Origen Enlace
Jheyman Mejia
  • 3.9k
  • 3
  • 26
  • 53

Una manera simple de vaciarlos es establecer un valor vacióvacío en los inputs.

Si ademasademás quieres que se vacíen al cancelar en vez de al cargar el modal, puedes hacerlo mediante el evento click del botón. Así no verasverás cargar los valores y después borrarse.

Una manera simple de vaciarlos es establecer un valor vació en los inputs.

Si ademas quieres que se vacíen al cancelar en vez de al cargar el modal puedes hacerlo mediante el evento click del botón. Así no veras cargar los valores y después borrarse.

Una manera simple de vaciarlos es establecer un valor vacío en los inputs.

Si además quieres que se vacíen al cancelar en vez de al cargar el modal, puedes hacerlo mediante el evento click del botón. Así no verás cargar los valores y después borrarse.

se añadieron 91 caracteres en el cuerpo
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40

Una manera simple de vaciarlos es seteandoestablecer un valor vació en los inputs.

$("#usuario, #contrasena").val("");

También puedes establecer un valor null:

$("#usuario, #contrasena").val(null);

Una manera simple de vaciarlos es seteando un valor vació en los inputs.

$("#usuario, #contrasena").val("");

Una manera simple de vaciarlos es establecer un valor vació en los inputs.

$("#usuario, #contrasena").val("");

También puedes establecer un valor null:

$("#usuario, #contrasena").val(null);
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40
Loading